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.
4 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. 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/… May 10, 2012 at 8:39
-
1
-
you save my day man, thanks!! just in case, instead of override, you can select the first one like this: .myclass:not(.myclass ~ .myclass) Sep 7, 2022 at 9:47
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. Mar 13, 2011 at 4:08 -
@ngduc It has worked for me using class names instead of element types. Thanks– DanAug 10, 2021 at 17:33
.class-name:first-of-type {
⋮ declarations
}
-
6The
:first-of-type
selector applies to element names, not class names: developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type Jun 16, 2013 at 22:08