The CSS first-child 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 the operation of this selector that must be understood for proper use.
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 installed directly in HTML.
Examples of pseudo-classes are "the first line in the container", "the first letter in the word", "the first child of the parent." The browser can detect such elements only after it has analyzed 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 determine the design that is not tied to HTML code, which opens up great opportunities for design.
First item selection
The CSS first-child pseudo-class is responsible for selecting the very first element in the parent container. In this case, text nodes are ignored, only full tags are counted.
Find the first elements in two simple HTML structures.
<ul> <li> </li> <li> </li> <li> </li> </ul> <p> <b> </b> . <i></i> - . <i></i> - . <a href="#"> </a> </p>
As a result, the first item in the list and the tag that defines the bold font will be selected.
<li> </li> <b> </b>
Syntax
All CSS pseudo-classes are defined by a specific template. First, the main selector is indicated, then the desired pseudo-class, separated by a colon.
b:first-child { text-decoration: underline; }
Such a rule emphasizes the text of the first element b inside each container.
<ul> <li> <b></b>, <b></b>. <i> </i> </li> <li> , , <b> </b>, - <b> </b>. <i> </i> </li> </ul>
In the screenshot, it is obvious that only elements were selected that corresponded simultaneously to the tag selector b and the selector of the: first-child pseudo-class. The style was applied inside each container, in this case, inside all the items on the list.
In addition to the tag, you can use any other CSS selector as the main one, for example:
.class:first-child {} [alt]:first-child {} *:first-child {}
Common mistakes
The pseudo-class of the first first-child element in CSS selects strictly the tag that is in first place in the parent container. Even if the element is fully consistent with the selector, but is not the first child, it will not be selected.
For example, take the previous list of quotes and transfer the authors to the beginning.
<ul> <li> <i> </i> <b></b>, <b></b>. </li> <li> <i> </i> , , <b> </b>, - <b> </b>. </li> </ul>
Although the element selector remains the same, the CSS style has not been applied since the first element in the container is now i.
Another mistake is to ignore the <br> tag. This is the same HTML element as the others. If it appears in the container before the block you are looking for, then the CSS first-child selector will not work.
Item Type Accounting
To avoid such situations, you can use the first-of-type pseudo-class. It works the same as the first-child CSS selector, but takes into account the type of element.
b:first-of-type { text-decoration: underline; }
Now, when counting, only elements corresponding to the selector b are taken into account.
Last item selection
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.