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.

ChristianKovats
ChristianKovats

Christian Kovats is a London-based web designer who loves crafting innovative and user-friendly interfaces. His passion for design is only rivaled by his love for nature and hiking, often drawing inspiration from his treks through the diverse landscapes of the UK. Outside of work, Christian enjoys spending quality time with his wife and 4-year-old son. A seasoned lucid dreamer, he also spends time exploring the intricate world of dream interpretation, reflecting his ever-curious and creative mind.

ChristianKovats

Leave a reply

You must be logged in to post a comment.