Menu
In my HTML I have,
<div class="container"> </div> <div class="container"> </div> <div class="container"> </div> <div class="container"> </div> .................. .................. In the above HTML I have the container class. In my CSS, I need to add some styles to .container:nth-child(3,4,5,6,..and so on). Means I need to apply all nth-child beside 1 and 2.
401
The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
The :nth-child selector allows you to select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.
As a general rule, if you want to select an interval of a selector regardless of the type of element it is, use nth-child . However, if you want to select a specific type only and apply an interval selection from there, use nth-of-type .
:nth-child() doesn't work on classes, it looks for the element itself. You'd need to wrap the .container divs by a wrapper and use the following:
.wrapper div:nth-child(n+3) { /* put your styles here... */ } <div class="wrapper"> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> </div> Working Demo.
:nth-child() Using .container:nth-child(n+3) may or may not work. Because, :nth-child() pseudo-class represents nth child element matching the selector (.container in this case).
If the .container element isn't the nth-child of its parent, it won't be selected.
From the Spec:
The
:nth-child(an+b)pseudo-class notation represents an element that hasan+b-1siblings before it in the document tree, for any positive integer or zero value ofn, and has a parent element.
Consider this example:
<div class="parent"> <div>1st</div> <div>2nd</div> <div>3rd</div> <div class="container">4th</div> <div class="container">5th</div> <div class="container">6th</div> <div>7th</div> <div class="container">8th</div> <div>9th</div> </div> In this case, .container:nth-child(2) won't select the 2nd div.container element (which has 5th content). Because that element is not the 2nd child of its parent, in parent's children tree.
Also, .container:nth-child(n+3) will select all the div.container elements because n starts from 0 for the first element in the parent's children tree, and the first div.container is the 4th child of its parent.
n starts from 0 n = 0: (0 + 3) = 3 => 3rd element n = 1: (1 + 3) = 4 => 4th element n = 2: (2 + 3) = 5 => 5th element ... Hence div.container:nth-child(n+3) represents all the 3rd, 4th, 5th, ... child elements matching div.container selector.
Online Demo.
189
css:
.wrapper div:nth-child(n+3) { /* you style*/ } Reason and Explanation
(0+3) = 3 = 3rd Element (1+3) = 4 = 4th Element (2+3) = 5 = 5th Element and so on ... where n=0,1,2,3..... Live example >>
45
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
