The first-child CSS pseudo-class is used to select the first element in a container. In this case, the specific type of the element is not taken into account, only its position relative to the parent matters. There are some subtleties in how this selector works that you need to understand in order to use it correctly.
CSS pseudo-classes
Along with identifiers, classes, tags, and attributes, pseudo-classes are a type of CSS selector. Their peculiarity is that they cannot be set directly in HTML.
Examples of pseudo-classes are "first line in container", "first letter in word", "first child of parent". The browser can detect such elements only after it has parsed the page and compiled the DOM tree, and in some cases only after rendering.
The presence of such a mechanism in CSS allows you to define styling that is not tied to HTML code, which opens up great design possibilities.
Selecting the first element
The CSS first-child pseudo-class is responsible for selecting the very first element in the parent container. Text nodes are ignored, only full tags count.
Let's findthe first elements in two simple HTML structures.
- First paragraph
- Second paragraph
- Third paragraph
There are only two ways to live life. The first is that miracles do not exist. The second - as if there were only miracles around. Albert Einstein
As a result, the first item of the list and the tag defining the bold font style will be selected.
First paragraph two ways
Syntax
All pseudo-classes in CSS are defined according to a certain pattern. First, the main selector is specified, then the desired pseudo-class, separated by a colon.
b:first-child { text-decoration: underline; }
This rule will underline the text of the first b element inside each container.
- Everyone wants to change the world, but nobody wants to change himself. Leo Tolstoy
- He who can, does, who can't - he teaches others. Bernard Shaw
It is clear from the screenshot that only elements that match both the b tag selector and the:first-child pseudo-class selector are selected. The style has been applied inside each container, in this case inside all list items.
In addition to the tag, you can use any other CSS selector as the main selector, for example:
.class:first-child {} [alt]:first-child {}:first-child {}
Typical mistakes
The pseudo-class of the first element first-child in CSSselects strictly the tag that is in first place in the parent container. Even if an element fully matches the selector but is not the first child, it will not be selected.
For example, take the previous list of quotes and move the authors to the beginning.
- Leo Tolstoy Everyone wants to change the world, but nobody wants to change himself.
- Bernard Shaw He who can, does, who can't - he teaches others.
Even though the element selector remains the same, no CSS styling was applied as the first element in the container is now i.
Another mistake is to ignore thetag. This is the same HTML element as the others. If it ends up in a container before the block you're looking for, then the CSS first-child selector won't work.
Accounting for element type
To avoid such situations, you can use the first-of-type pseudo-class. It works just like the CSS first-child selector, but takes into account the type of the element.
b:first-of-type { text-decoration: underline; }
Now only elements that match selector b.
Select last element
There is also a last-child pseudo-class that works similar to the CSS first-child selector, but starts counting elements from the end of the container.
