Matching first element in whole document?
are you allowed to cheat with jQuery? some times jQuery (javascript) provide(s) elegant alternatives beyond the html and css limitations
$(document).ready(function() {
$('body').find('h1:first').css('color','#0000ff');
}); // ready
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>
Select first element of a type on page even when elements are nested at different levels
When there is an unspecified depth and no class assignments it becomes very difficult to target this without traversing the DOM
Using Just plain-ol-vanilla css I don't see a way to do this but using a tiny jQuery you can achieve it
var ps = $('p');
console.log(ps[0])$(ps[0]).css('color', 'red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div> <p> p element at one nesting</p></div>
<p> p element not nested</p>
<h1> <p> p element at one nesting (oddly nested inside h1 tag)</p></h1>
<div> <div> <p> p element at two nestings</p> </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
Is Globally Defined Position:Relative to Page Container a Good Practice
CSS Dropdown Menu Hidden Behind Content Ie7
Full Width Background, Without a Wrapper
Remove Scollbar When No Need to Scroll
Background-Size 100% Not Working in Ie8 and Ie7
My Less Math Operations Aren't Working in My Media Query Definitions
Issue with: Global() CSS-Module Selectors Not Being Pure in Nextjs
How to Write Multiple CSS Selectors in One Line
Perfect Infinite Rotation for ֍ Character
How to Keep Bootstrap 3 Navbar as Collapsed for All Screen Sizes
Matching First Element in Whole Document
iPhone Sticky Menu Jquery Onscroll iOS 9
CSS Doesn't Load After Migration of Magento Website
Google Fonts Font Doesn't Load
How to Get Page Content to Stretch and Stick Footer to Bottom of Page