CSS selector: get the first element with the specified class

Question

I have a bunch of elements with class names red, but I can't seem to select the first element with class="red" using the following CSS rule:

.home .red:first-child {
    border: 1px solid red;
}

<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

What's wrong with this selector and how can I correct it to target the first child with class red?

Answer 1

:first-child The purpose of the selector is, as the name suggests, to select the first child tag of the parent tag. So this example works (just tried it on here): < /p>

    
first
    
second

However, this method does not work if you nest the tags under different parent tags, or your red class tag is not the first tag under the parent tag.

Also note that this not only applies to the first such tag in the entire document, but also every time there is a new parent tag surrounding it, for example:

    
first
    
second


    
third
    
fourth

first and third will be red.

For your case you can use :nth-of-type selector:

.red:nth-of-type(1)
{
    border:5px solid red;
} 

    blah
    
first
    
second
    
third
    
fourth

Thanks to Martyn, who deleted the answer containing this method.

For more information about :nth-child() and :nth-of-type(), please visit http://www.quirksmode.org /css/nthchild.html.

Please note that this is a CSS3 selector, so some now-outdated browser versions may not function as expected (e.g. IE8 or earlier). Visit https://caniuse.com/?search=nth-of-type for more details.

Answer 2

This is one of the most famous examples of authors misunderstanding how :first-child works. Introduced in CSS2, :first-child pseudo class represents the first child of its parent. That's it. There is a very common misconception that it selects the first child element that matches the criteria specified by the rest of the compound selector. Due to the way selectors work (see here for an explanation), this is simply not true.

Selector level 3 introduces the :first-of- type pseudo-class , representing the first element among its siblings of element type. This answer explains the difference between :first-child and :first-of-type with pictures and text. However, like :first-child, it does not look at any other conditions or properties. In HTML, element types are represented by tag names. In the question, the type is p.

Unfortunately, there is no similar

:first-of-class pseudo-class to match the first child element of a given class. When this answer was first posted, the newly released FPWD selector level 4 introduced the :nth-match() pseudo-class , which was designed around the existing selector mechanism, as As I mentioned in the first paragraph, by adding the selector list parameter you can provide the rest of the selector compound selector to get the desired filtering behavior. In recent years, this functionality has been incorporated into :nth-child( ) itself , with the selector list appearing as an optional second argument, to simplify things and avoid :nth- match() False impression of matching across the entire document (see final comment below) .

While we wait for

cross-browser support (seriously, it's been almost 10 years, and there's only been one implementation in the past 5 years), here's a workaround Lea Verou and I developed independently (she did it first!) by first applying the style you want to all elements of that class:

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

...then use

to override the generic sibling combinator in the rule ~:

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

Now only the first element with

class="red" will have a border.

Here are instructions on how to apply the rules:

.home > .red {
    border: 1px solid red;
}

.home > .red ~ .red {
    border: none;
}

  blah         
  
first
  
  
second
 
  
third
  
  
fourth