Menu
I have a div tag containing several ul tags.
I'm able to set CSS properties for the first ul tag only:
div ul:first-child {
background-color: #900;
}
However, my following attempts to set CSS properties for each other ul tag except the first one don't work:
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
How can I write in CSS: "each element, except the first"?
417
Use the :not(selector) Selector Not to Select the First Child in CSS. We can use the :not(selector) selector to select every other element that is not the selected element. So, we can use the selector not to select the first child in CSS. We can use :first-child as the selector in the :not(selector) selector.
ul:not(:first-child) means literally "any ul element that is not first child of its parent", so it won't match even the 1st ul if it's preceded by another element ( p , heading etc.). On the contrary, ul:not(:first-of-type) means "any ul element except the 1st ul in the container".
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.
One of the versions you posted actually works for all modern browsers (where CSS selectors level 3 are supported):
div ul:not(:first-child) { background-color: #900; } If you need to support legacy browsers, or if you are hindered by the :not selector's limitation (it only accepts a simple selector as an argument) then you can use another technique:
Define a rule that has greater scope than what you intend and then "revoke" it conditionally, limiting its scope to what you do intend:
div ul { background-color: #900; /* applies to every ul */ } div ul:first-child { background-color: transparent; /* limits the scope of the previous rule */ } When limiting the scope use the default value for each CSS attribute that you are setting.
113
This CSS2 solution ("any ul after another ul") works, too, and is supported by more browsers.
div ul + ul { background-color: #900; } Unlike :not and :nth-sibling, the adjacent sibling selector is supported by IE7+.
If you have JavaScript changes these properties after the page loads, you should look at some known bugs in the IE7 and IE8 implementations of this. See this link.
For any static web page, this should work perfectly.
40
Since :not is not accepted by IE6-8, I would suggest you this:
div ul:nth-child(n+2) {
background-color: #900;
}
So you pick every ul in its parent element except the first one.
Refer to Chris Coyer's "Useful :nth-child Recipes" article for more nth-child examples.
24
not(:first-child) does not seem to work anymore. At least with the more recent versions of Chrome and Firefox.
Instead, try this:
ul:not(:first-of-type) {}
You can use "first-child" pseudo-class inside the "not()" pseudo-class.
div ul:not(:first-child){
background-color: #900;
}<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo Classes</title>
</head>
<body>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
</ul>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
</ul>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</div>
</body>
</html>Alternative ways,
div ul:not(:nth-child(1)){
background-color: #900;
}<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo Classes</title>
</head>
<body>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
</ul>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
</ul>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</div>
</body>
</html>With "nth-of-type()", It will select nth number of element of its parent.
div ul:not(:nth-of-type(1)){
background-color: #900;
}<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo Classes</title>
</head>
<body>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
</ul>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
</ul>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</div>
</body>
</html>With "nth-last-child()", It will select nth number of child counting from the last child. If you have 4 "ul" tags, you can write like this.
div ul:not(:nth-last-child(4)){
background-color: #900;
}<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo Classes</title>
</head>
<body>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
</ul>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
</ul>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</div>
</body>
</html>div ul:not(:nth-last-of-type(4)){
background-color: #900;
}<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo Classes</title>
</head>
<body>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
</ul>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
</ul>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</div>
</body>
</html>These are some of the best ways to handle these kind of situations.
44
div li~li {
color: red;
}
Supports IE7
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
