How to highlight the first paragraph

You would like to make the first paragraph larger and bold. You could add a class to the first paragraph and select it that way, however using a pseudo-class selector is more flexible — it means that you can target the paragraph based on its location in the document, and you won't have to manually move the class if the source order changes.

A pseudo-class acts as if you have applied a class; however, rather than using a class selector CSS selects based on the document structure. There are a number of different pseudo-classes that can select different things. In our case we are going to use :first-child. This will select the element that is the first-child of a parent.

You can try changing :first-child to :last-child in the live example above, and you will select the last paragraph.

Whenever you need to target something in your document, you can check to see if one of the available pseudo-classes can do it for you.

• The pseudo-classes reference page.
• Learn CSS: Pseudo-classes and pseudo-elements.