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.
5 Answers
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.
-
3Browser support is actually better than the CSS structural pseudoclasses. Edited my answer to include it. Commented Mar 14, 2011 at 0:11
-
Fail me... I just realized I had thought of this myself some time after you posted this, completely forgetting about your answer. I've credited you here now: stackoverflow.com/questions/2717480/… Commented May 10, 2012 at 8:39
-
1do you know for the last element with the same class? Commented Nov 5, 2015 at 18:21
-
you save my day man, thanks!! just in case, instead of override, you can select the first one like this: .myclass:not(.myclass ~ .myclass) Commented Sep 7, 2022 at 9:47
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:
This problem sucks as bad as the solutions. IMO you should just give the first element a class of .first{} programmatically.
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.
-
1
-
1And if the first child doesn't have
.test, but some other sibling does, then nothing gets selected. Commented Mar 13, 2011 at 4:08 -
@ngduc It has worked for me using class names instead of element types. Thanks– DanCommented Aug 10, 2021 at 17:33
.class-name:first-of-type {
⋮ declarations
}
-
7The
:first-of-typeselector applies to element names, not class names: developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type Commented Jun 16, 2013 at 22:08