div's :nth-child(2) background-color is also changing body background-color
Question
Why is the :nth-child(2) changing the color of the <body> too? When set to 1 or 3 this does not happen.
The Code ( http://codepen.io/kreitzo/pen/mPXzWv ):
body { font-size: 50px; text-align: center; } div { width: 30px; height: 30px; background-color: red; } :nth-child(1) { background-color: blue; } :nth-child(2) { background-color: green; } :nth-child(3) { background-color: yellow; }
<div></div> <div></div> <div></div> <div></div>
6 answers
solution1
3 ACCPTED 2016-04-12 09:34:47
That is because the body tag is the second child of its parent (which is the root html tag). You can see this in the below screenshot. The first child of html tag is the head tag and the second child is the body tag.
The selector :nth-child(2) selects every element that is the second child of its own parent.
The :nth-child(3) , nth-child(1) selectors doesn't affect the background color of body because body is not the 3rd or 1st child of its parent.
If you want to select only the second child of a specific parent then you should mention the parent also as part of the selector (like the below):
-
body :nth-child(2)- Selects all elements that are 2nd children of their respective parent at any level underbody. So, this will not select thebodytag. -
body > :nth-child(2)- Selects all elements that are 2nd children of their respective parent and the parent itself is a direct child of thebodytag.
If you wish to select the second child only if it is of a certain type, then the element type should also be specified before the pseudo-class in the selector. For example, div:nth-child(2) will select only the div tags which are the second child of their respective parent.
solution2
1 2016-04-12 09:34:29
Because body is the second element of you html page
structure is like this
<html>
<head>
</head>
<body>
</body>
</html>
So your current css will catch all the second elements. Define css for elements of div like this
body {
font-size: 50px;
text-align: center;
}
div {
width: 30px;
height: 30px;
background-color: red;
}
div:nth-child(1) {
background-color: blue;
}
div:nth-child(2) {
background-color: green;
}
div:nth-child(3) {
background-color: yellow;
}
solution3
0 2016-04-12 09:36:14
You have to do proper targetting of element like :
div:nth-child(2) { background-color: green; }
solution4
0 2016-04-12 09:39:31
Use div:nth-of-type(n) instead of nth-child. This way you make sure only the divs are targeted.
solution5
0 2016-04-12 09:49:32
Its because you have not specified nth-child for specific element but applied for any element selector. That's why the :nth-child(2) takes to the body element also as it is the second element from the root element html .
You may override the css rules for the body applied to :nth-child(2) :
/*just add :root in your existing body to make it greater specificity*/
:root body{
background-color: transparent;
}
:nth-child(2){
background-color: green;/*this will not override to body bgcolor*/
}
But I would recommend you to use :nth-child for specific element which is better than the above way because in the above method :root body has greater specificity than previous and will make you some problem for simple element css rules overridings.
div:nth-child(2){
background-color: green;
}
solution6
0 2016-04-12 10:03:50
your selectors :nth-child(x) could be read as *:nth-child(x) meaning every x child.
you can set it as body :nth-child(x) to limit it's scope to any direct x child of body or as div:nth-child(x) to limit it's scope to any div that is the x child of it's parent
body { font-size: 50px; text-align: center; } div { width: 30px; height: 30px; background-color: red; } div:nth-child(1) { background-color: blue; } div:nth-child(2) { background-color: green; } div:nth-child(3) { background-color: yellow; }
<div></div> <div></div> <div></div> <div></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.