The :first-child
pseudo-class always refers to the initial child within its parent element. However, it is unable to exclude the first sibling that comes after the reference element.
If your intention is to target all elements excluding the immediate sibling following the reference element, you should use the following syntax:
.reference + * ~ *{
color: red;
}
In this context, the .reference
symbolizes the reference element, the + *
points to the first sibling of the reference element irrespective of its type, and the ~ *
signifies all subsequent siblings which can be of any type.
For those utilizing Less, the selector could either remain as shown above or alternatively, it can be structured like so:
.reference {
& + * ~ * {
color: red;
/* additional styling rules here */
}
}
The example below illustrates the functionality in action
.reference + * ~ *{
color: red;
}
<div class='reference'>Reference Element</div>
<p>Some other element which is the first one after reference element</p>
<div>The elements to be selected</div>
<p>The element to be selected</p>