Need an explanation on HTML, nth-child
source link: https://www.codesd.com/item/need-an-explanation-on-html-nth-child.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Need an explanation on HTML, nth-child
NOTE: SEE BELOW FOR CLEARER EXPLANATION
I'm trying to figure out why this is happening.
HTML
<div class="chicken">
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
</div>
CSS
.chicken { width:100%; background:#999; float:left; }
.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }
.big-chix:nth-child(2n+1) { background-color:#eee; }
.big-chix:nth-child(2n+2) { background-color:#aaa; }
What I'm trying to achieve here is to put a different background for .big-chix
class for nth children 1, 3 , 5... and 2, 4, 6...
But when I put in a paragraph (or anything else like a div, etc for that matter), it becomes like this:
HTML
<div class="chicken">
<p>paragraphy</p>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
</div>
CSS
.chicken { width:100%; background:#999; float:left; }
.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }
.big-chix:nth-child(2n+1) { background-color:#eee; }
.big-chix:nth-child(2n+2) { background-color:#aaa; }
The nth-child placement switches places. Why is this so? Isn't .big-chix:nth-child()
only suppose to select all the .big-chix
classes (which is 6 .big-chix
), then set 1, 3, 5 to a background-color
of #eee
, and 2, 4, 6 to #aaa
?
EDIT: From what I gather, nth-child
will not apply to an element child in the element parent in a code like this:
jsFiddle - nth-child(1) when <p>
paragraph is the first element
HTML
<div class="chicken">
<p>paragraphy</p> [this is nth-child(1)]
<div class="big-chix">Contento</div> [this is nth-child(2)]
<div class="big-chix">Contento</div> [this is nth-child(3)]
<div class="big-chix">Contento</div> [this is nth-child(4)]
<div class="big-chix">Contento</div> [this is nth-child(5)]
<div class="big-chix">Contento</div> [this is nth-child(6)]
<div class="big-chix">Contento</div> [this is nth-child(7)]
</div>
CSS
.chicken { width:100%; background:#999; float:left; }
.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }
.big-chix:nth-child(1) { background-color:#eee; }
BUT, it will work in a parent element that has .big-chix
as the first element.
jsFiddle - nth-child with .big-chix
as the first element
HTML
<div class="chicken">
<div class="big-chix">Contento</div> [this is nth-child(1)]
<p>paragraphy</p> [this is nth-child(2)]
<div class="big-chix">Contento</div> [this is nth-child(3)]
<div class="big-chix">Contento</div> [this is nth-child(4)]
<div class="big-chix">Contento</div> [this is nth-child(5)]
<div class="big-chix">Contento</div> [this is nth-child(6)]
<div class="big-chix">Contento</div> [this is nth-child(7)]
</div>
CSS
.chicken { width:100%; background:#999; float:left; }
.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }
.big-chix:nth-child(1) { background-color:#eee; }
Isn't .big-chix:nth-child() only suppose to select all the .big-chix classes (which is 6 .big-chix), then set 1, 3, 5 to a background-color of #eee, and 2, 4, 6 to #aaa?
:nth-child()
selects "The nth element in the parent", not "The nth element that also matches the other parts of the selector".
Each selector is applied independently and only elements that match all the components will match the complete selector.
Note, however, that there is :nth-of-type()
which should do what you want.
Recommend
-
15
RAGANWALD.COM An ES6 function to compute the nth Fibonacci number
-
5
RAGANWALD.COM A program to compute the nth Fibonacci number Since I’m...
-
8
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1709
-
11
Leetcode 19.Remove Nth Node From End of List 当前位置:XINDOO > 算法 > 正文 题...
-
11
How to combine the nth-child () rules into one? advertisements I currently have this long rule #content #wrapper table td:nth-c...
-
2
In this series of posts, I will discuss coding questions on the LinkedList Data structure. The posts in this series will be organized in the following way, Question Link ❓ Possible Explanation 📝
-
6
:nth-child Between Two Fixed Indexes Chris Coyier on Jun 29, 2021 Learn Development at
-
7
一、:nth-child1.1 说明:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。n 可以是数字、关键词或公式。注意:如果第 N 个子元素与选择的元素类型不同则样式无效!1.2 示例
-
1
nth-child(n)、first-child、last-child的用法更新日期: 2022-10-09阅读: 131标签:
-
7
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK