CODEWITHSUNDEEP
csscss-selectors
Web_Designer
Web_Designer

Reputation: 74650

CSS select first element with a certain class

What is the syntax for selecting the first element with a certain class? Please specify whether that method of selection is part of CSS3 or CSS2.1.

Upvotes: 18

Views: 20143

Answers (5)

Roger
Roger

Reputation: 2316

2023 answer

You can now use selectors inside :nth-child and :nth-last-child. So if you have:

<div class="my-container">
   <div class="class1"></div>
   <div class="class1"></div>
   <div class="class2"></div>
   <div class="class2"></div>
</div>

Select the div with the first class2 with this:

:nth-child(1 of .class2) {
  background: white
}

Or, if you want more specificity, this:

.my-container .class2:nth-child(1 of .class2) {
  background: white
}

Further reading:

Upvotes: 1

Spankied
Spankied

Reputation: 1895

This problem sucks as bad as the solutions. IMO you should just give the first element a class of .first{} programmatically.

Upvotes: 0

bhupendra kumar
bhupendra kumar

Reputation: 13

.class-name:first-of-type {
  ⋮ declarations
}

Upvotes: -2

Lea Verou
Lea Verou

Reputation: 23907

If you need the first element with a certain class among its siblings, you can use

.myclass {
    /* styles of the first one */
}

.myclass ~ .myclass {
    /* styles of the others (must cancel the styles of the first rule) */
}

Don't try to use .myclass:not(.myclass ~ .myclass) to do this in only one rule, it won't work since :not() only accepts simple selectors in the parentheses.

If you want the first .myclass in the whole document, there is no way to do it with CSS alone.

The :nth-of-type() or :nth-child() approaches posted are wrong, even if they coincidentally happen to match the elements you want in your page.

Browser support of sibling selector (~): IE7+ and all others.

Upvotes: 61

ngduc
ngduc

Reputation: 1413

Try this

.testparent .test:first-child {
    color: red;
}

<div class="testparent">
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
</div>

the first div 'test' has red color only.

Upvotes: -1

Related Questions