CODEWITHSUNDEEP
htmlcsscss-selectors
Taylor Foster
Taylor Foster

Reputation: 1215

CSS Every Third of type

Given the following markup, how do I select every third 'location-block' in CSS? Thank you! I tried .location-block:nth-child(3n){} but that did not work.

<div class="location-block">
Lorem Ipsum Dolor
</div>
<div class="location-block">
 Lorem Ipsum Dolor
</div>
<div class="location-block"> <!-- Want to Select This -->
 Lorem Ipsum Dolor
</div>
<div class="location-block">
 Lorem Ipsum Dolor
</div>
<div class="location-block">
 Lorem Ipsum Dolor
</div>
<div class="location-block"> <!-- Want to Select This -->
 Lorem Ipsum Dolor
</div>

Upvotes: 1

Views: 2106

Answers (4)

T04435
T04435

Reputation: 14002

Hello there if you know your markup(HTML) is going to be all div's you don't need the use of clases.

div:nth-of-type(3n){background:tomato}
<div>
  Lorem Ipsum Dolor
</div>
<div>
  Lorem Ipsum Dolor
</div>
<div>
  Lorem Ipsum Dolor
</div>
<div>
  Lorem Ipsum Dolor
</div>
<div>
  Lorem Ipsum Dolor
</div>
<div>
  Lorem Ipsum Dolor
</div>

Thanks T04435.

Upvotes: 0

drosam
drosam

Reputation: 2896

.location-block:nth-child(3n){ } works. You can see here

Also you can use :nth-of-type 

.location-block:nth-of-type(3n) { 
}

Here you have a working example https://jsfiddle.net/8eh2r06h/

Upvotes: 3

LarsW
LarsW

Reputation: 1588

Works fine for me. Maybe you're using IE 8 or earlier. And, as drosam said, maybe use :nth-of type() instead, if the divs aren't the only children in whatever container they are in.

.location-block:nth-child(3n){color:red}
.location-block:nth-of-type(3n){background:yellow}
<div class="location-block">
  Lorem Ipsum Dolor
</div>
<div class="location-block">
  Lorem Ipsum Dolor
</div>
<div class="location-block">
  Lorem Ipsum Dolor
</div>
<div class="location-block">
  Lorem Ipsum Dolor
</div>
<div class="location-block">
  Lorem Ipsum Dolor
</div>
<div class="location-block">
  Lorem Ipsum Dolor
</div>

Upvotes: 2

Michal
Michal

Reputation: 99

.location-block:nth-child(3n) {}

Upvotes: 3

Related Questions