CSS selector for first element with class
This is one of the most well-known examples of authors misunderstanding how :first-child
works. Introduced in CSS2, the :first-child
pseudo-class represents the very first child of its parent. That's it. There's a very common misconception that it picks up whichever child element is the first to match the conditions specified by the rest of the compound selector. Due to the way selectors work (see here for an explanation), that is simply not true.
Selectors level 3 introduces a :first-of-type
pseudo-class, which represents the first element among siblings of its element type. This answer explains, with illustrations, the difference between :first-child
and :first-of-type
. However, as with :first-child
, it does not look at any other conditions or attributes. In HTML, the element type is represented by the tag name. In the question, that type is p
.
Unfortunately, there is no similar :first-of-class
pseudo-class for matching the first child element of a given class. At the time this answer was first posted, the newly published FPWD of Selectors level 4 introduced an :nth-match()
pseudo-class, designed around existing selector mechanics as I mentioned in the first paragraph by adding a selector-list argument, through which you can supply the rest of the compound selector to get the desired filtering behavior. In recent years this functionality was subsumed into :nth-child()
itself, with the selector list appearing as an optional second argument, to simplify things as well as averting the false impression that :nth-match()
matched across the entire document (see the final note below).
While we await cross-browser support (seriously, it's been nearly 10 years, and there has only been a single implementation for the last 5 of those years), one workaround that Lea Verou and I developed independently (she did it first!) is to first apply your desired styles to all your elements with that class:
/*
* Select all .red children of .home, including the first one,
* and give them a border.
*/
.home > .red {
border: 1px solid red;
}
... then "undo" the styles for elements with the class that come after the first one, using the general sibling combinator ~
in an overriding 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's an illustration of how the rules are applied:
.home > .red {
border: 1px solid red;
}
.home > .red ~ .red {
border: none;
}
<div class="home">
<span>blah</span> <!-- [1] -->
<p class="red">first</p> <!-- [2] -->
<p class="red">second</p> <!-- [3] -->
<p class="red">third</p> <!-- [3] -->
<p class="red">fourth</p> <!-- [3] -->
</div>
CSS Selector - first element with Class in a group of same class
To select first child of the ul
element, you can use :first-child
pseudo-class.
To select the first element in each group, you can use adjacent sibling selector.
.A + .B
will select any element with class B
that immediately follows an element with class A
. Similarly .B + .A
will select any element with class A
that immediately follows an element with class B
.A { background: red; }.B { background: blue; }
.A:first-child,.B + .A,.A + .B { background: yellow;}
<ul class="list"> <li class="item A">AAA</li><!-- I want to select this --> <li class="item A">AAA</li> <li class="item A">AAA</li> <li class="item B">BBB</li><!-- I want to select this --> <li class="item B">BBB</li> <li class="item B">BBB</li> <li class="item A">AAA</li><!-- I want to select this --> <li class="item A">AAA</li> <li class="item A">AAA</li></ul>
CSS3 selector :first-of-type with class name?
No, it's not possible using just one selector. The :first-of-type
pseudo-class selects the first element of its type (div
, p
, etc). Using a class selector (or a type selector) with that pseudo-class means to select an element if it has the given class (or is of the given type) and is the first of its type among its siblings.
Unfortunately, CSS doesn't provide a :first-of-class
selector that only chooses the first occurrence of a class. As a workaround, you can use something like this:
.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }
Explanations and illustrations for the workaround are given here and here.
CSS select element with class, only if it is NOT first child of parent
Using the :not
and :first-child
selectors should do it.
.special:not(:first-child) {}
CSS selector for the first element of class
You would use the :first-child
pseudo class.
EXAMPLE HERE
.container .some_class:first-child button {
background:black;
}
Alternatively, assuming that the markup can be different, you might need to use something like this to ensure that the first button is selected even if .some_class
isn't the first element. (example)
.container :first-child button {
background:black;
}
CSS - Select the first matched elements (not the first child or the first type)
There is no selector to match the first child/sibling with a certain class. If you need it for this specific HTML structure only, then could use something like #parent > .elements ~ .elements
to specifically target that second one.
#parent > .elements { /* for all .elements children */ background: red;}#parent > .elements ~ .elements { /* only those that are siblings of a previous .elements element */ background: green;}
<div id='parent'> <div>---</div> <div class='elements'>Foo</div> <div>---</div> <div class='elements'>Bar</div> <div>---</div></div>
CSS selector to select first element of a given class
CSS3 provides the :first-of-type
pseudo-class for selecting the first element of its type in relation to its siblings. However it doesn't have a :first-of-class
pseudo-class.
As a workaround, if you know the default styles for your other .A
elements, you can use an overriding rule with the general sibling combinator ~
to apply styles to them. This way, you sort of "undo" the first rule.
The bad news is that ~
is a CSS3 selector.
The good news is that IE recognizes it starting from IE7, like CSS2's >
, so if you're worried about browser compatibility, the only "major browser" this fails on is IE6.
So you have these two rules:
.C > * > .A {
/*
* Style every .A that's a grandchild of .C.
* This is the element you're looking for.
*/
}
.C > * > .A ~ .A {
/*
* Style only the .A elements following the first .A child
* of each element that's a child of .C.
* You need to manually revert/undo the styles in the above rule here.
*/
}
How styles are applied to elements is illustrated below:
<div class="C">
<!--
As in the question, this element may have a class other than B.
Hence the intermediate '*' selector above (I don't know what tag it is).
-->
<div class="B">
<div class="E">Content</div> <!-- [1] -->
<div class="F">Content</div> <!-- [1] -->
<div class="A">Content</div> <!-- [2] -->
<div class="A">Content</div> <!-- [3] -->
</div>
<div class="D">
<div class="A">Content</div> <!-- [2] -->
<div class="E">Content</div> <!-- [1] -->
<div class="F">Content</div> <!-- [1] -->
<div class="A">Content</div> <!-- [3] -->
</div>
</div>
This element does not have class
A
. No rules are applied.This element has class
A
, so the first rule is applied. However it doesn't have any other such elements occurring before it, which the~
selector requires, so the second rule is not applied.This element has class
A
, so the first rule is applied. It also comes after other elements with the same class under the same parent, as required by~
, so the second rule is also applied. The first rule is overridden.
Related Topics
Why Would Font Names Need Quotes
Apple-Like Scrollbars Using CSS
Selenium Webdriver Get Text from CSS Property "Content" on a ::Before Pseudo Element
How to Get the Height of an Element Using CSS Only
Angular Dynamic Background Images
How to Prevent a CSS Keyframe Animation from Running on Page Load
How to Decrease Image Brightness in CSS
How to Use Apple's New San Francisco Font on a Webpage
How to Reference a .CSS File on a Razor View
Specifying Style and Weight for Google Fonts
Differencebetween Outline and Border CSS Properties
Nesting Pseudo-Elements Inside Pseudo-Elements
How to Remove Blue "Selected" Outline on Buttons
Google Warning: Resource Interpreted as Font But Transferred with Mime Type Application/Octet-Stream
Background Images: How to Fill Whole Div If Image Is Small and Vice Versa