Menu
I have a long line of DIVs and I need to change the padding on every 4th DIV using the nth-child selector, but I am having problems getting it to work at all.
Here is my css:
.content_tab {
width: 220px;
height: 340px;
margin-right: 20px;
margin-bottom: 20px;
float: left;
background-color: #0F0;
}
.content_tab:nth-child(4){
background-color: #F00;
margin-right: 0px;
}
and here is my HTML:
<div class="content">
<div class="content_tab"></div>
<div class="content_tab"></div>
<div class="content_tab"></div>
<div class="content_tab"></div>
<div class="content_tab"></div>
<div class="content_tab"></div>
<div class="content_tab"></div>
</div>
Any ideas?
789
In our above example, we selected every fourth element with the formula 4n, which worked because every time an element was checked, “n” increased by one (4×0, 4×1, 4×2, 4×3, etc). If an element’s order matches the result of the equation, it gets selected (4, 8, 12, etc).
Just a number. If you put simply a number in the parentheses, it will match only that number element. For example, here is how to select only the 5th element: Let’s get back to the 3n+3 from the original example though. How does that work? Why does it select every third element?
If you have any other elements of different types such as h1 or p, you will need to use :nth-of-type () instead of :nth-child () to ensure you only count div elements:
There is a CSS selector, really a pseudo-selector, called nth-child. Here is an example of using it: ul li:nth-child(3n+3) { color: #ccc; }. What the above CSS does, is select every third list item inside unordered lists. That is, the 3rd, 6th, 9th, 12th, etc.
You should change
.content_tab:nth-child(4){
To
.content_tab:nth-child(4n){
As explained here http://css-tricks.com/how-nth-child-works/
Or if you do not want the first div to be selected, you need
.content_tab:nth-child(4n+4){
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
