CODEWITHSUNDEEP
htmlcss
Name
Name

Reputation: 408

How to exclude nth selector?

Let's say i have this:

enter image description here

i want to add green color for each div except a div with a multiple of 3? Is it possible to do that with nth-child() or maybe with another way?

Upvotes: 1

Views: 736

Answers (3)

J. Shabu
J. Shabu

Reputation: 1053

This is working fine 

div:nth-child(3n) {
background: black;

}

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122047

You can do this with :nth-child() and :not() pseudo-class which will select all divs except every 3rd div 

div:not(:nth-child(3n)) {
  color: green;
}
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>

Another way is to select div:nth-child(3n + 1) and div:nth-child(3n + 2)

div:nth-child(3n +1),
div:nth-child(3n + 2) {
  color: green;
}
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>

Upvotes: 2

Sam Chahine
Sam Chahine

Reputation: 620

This should work:

:not(:nth-child(3n))

Upvotes: 4

Related Questions