The CSS first selectors

In this articles we will look at selectors that do something with the first elements or characters. They are pseudo classes or elements. Let’s take a look at them one by one.

:first-child

The “first-child” pseudo-class selector allows you to select the very first and only the first element inside another element.

Basic syntax:

element_name:first-child { style_properties }

Example:

p:first-child {
color: red;
}

This will select every paragraph that is the first element of their parent.

If you want to be more specific and say that the parents of the paragraphs must be, for example divs, you can do this:

div p:first-child {
color: red;
}

This will select every first paragraph in every divs on the page, and set their font color to red. But if the paragraph is the first element inside a different tag, the style will not be applied.

::first-letter

The ::first-letter is a pseudo-element. With this you can target the first letter of an element and apply styles to it.

Basic syntax:

element_name::first-letter { style_properties }

Example:

p::first-letter {
font-size: 40px;
color:brown;
}

This will select the first letter of every paragraph in the document and style the font size and color of their first letter.

If you want to be more specific and want to narrow down a little, you could say:

article p::first-letter {
font-size: 40px;
color:brown;
}

Change the first letters of the paragraphs if they are inside an article.

::first-line

The ::first-line is a pseudo-element. It applies styles to the first line of the specified element.

Basic syntax:

element_name::first-line { style_properties }

Example:

p:first-line {
color: red;
text-decoration:underline;
}

This code will change the color and text decoration of the first line of each paragraph.

Please note that only certain properties can be used with this selector, such as font related, background related properties. For full list, visit Mozilla developer docs.

:first-of-type

The :first-of-type pseudo-class selector in allows you to target the first instance of an element within another one. This is the main difference between the :first-child as it targets the first element in a container.

Basic syntax:

element_name:first-of-type { style_properties }

Example:

<div>
<h2>Hello</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>

here the following code would not work

p:first-child {
color: red;
}

However, with :first-of-type

p:first-of-type{
color: red;
}

it works. It will target the first occurrence of the p element, it doesn’t matter when it comes first.