CSS selector: first div within an id or class
If you want to select the first div
within a specific class then you can use:
.class div:first-child
This however won't work when you've got the following HTML:
<div class="class">
<h1>The title</h1>
<div>The CSS won't affect this DIV</div>
</div>
It won't work because the div
isn't the first child of the .class
. If you wan't to target that div
in this case I'd suggest adding another container (or adding a class to that div
whatever you like :) )
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>
How to select 1st occurrence of an inner class on a page for css?
As @Gerard commented, you can use
.outer.col-xs-9 .inner { }
This works because the first .outer
element also has the .col-xs-9
class. If you want to select the .inner
element of the first .outer
element without regard to other classes, you can use
.row .outer:first-child .inner { }
The :first-child pseudo-class represents the first element within a group of sibling elements. The .inner
elements you have are not sibling elements, but their parents are siblings.
.inner { color: blue;}
.row .outer:first-child .inner { color: red;}
<div class="row"> <div class="outer col-xs-9"> <div>some text 1</div> <div class="inner"> I should be red </div> </div> <div class="outer col-xs-3"> <div>some text 2</div> <div class="inner"> I should be blue </div> </div> </div>
Is the CSS ID selector with first-child pseudo syntax correct using a space?
Using a space (blank) between or not is a semantic difference, it controls on what set of elements that additional selector is actually applied on:
#myDiv:first-child
:
no separating blank means you try to filter the set of elements with the id "myDiv". This obviously makes no sense but is semantically valid.#myDiv :first-child
:
a separating blank means you select out of all elements inside the selected div, so child elements. Note that this does not only match immediate children though, but also children further down the hierarchy.#myDiv > :first-child
:
a separating "greater than" (arrow) means you select out of all immediate child elements of the selected div. Sp this does not match elements further down the hierarchy.
First DIV has a different style than the rest
Use nth-of type
selector.
.content1:nth-of-type(1){
/* your style */
}
Using first-child
only works if there is no sibling element before your desired div.
See fiddle here.
Related Topics
Styling Overlapping Annotations in Text with HTML <Span> Tags and CSS
How to Float a Twitter Bootstrap Navbar Item Right with Either Class=Pull-Right or Float:Right
How to Prevent Fractional Pixels in an Element with Width Set to Auto
How to Make Leaflet Map Height Variable
CSS Animate Text from Left to Right in Div Container with Overflow Hidden
The Min/Max-Width Media Query Doesn't Make Grammatical Sense
Bootstrap 4 Vertical Align Text Won't Center on Card
How to Add Multiple Style Attributes to a React Element
New Bulletproof @Font-Face Syntax Using Data Uris in Compass
React Native - Why Padding Does Not Work
Why Clear: Right Doesn't Work as Intended
Gooey CSS Effects with Contrast Parent
Left/Right Float Button Inside Div
Half Pixel in Border Width Size It Is Not Showing
CSS: Placing an Arrow/Triangle with Border on The Top of My Drop Down Menu