CSS Каждый третий тип

Question

Учитывая следующую разметку, как выбрать каждый третий «блок-блок» в CSS? Спасибо! Я попробовал .location-block:nth-child(3n){}, но это не сработало.

<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> 

Answer 1

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

Answer 2

.location-block:nth-child(3n){ } работы. Вы можете увидеть here

Также вы можете использовать :nth-of-type

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

Здесь у вас есть рабочий пример https://jsfiddle.net/8eh2r06h/

Answer 3

отлично работает для меня. Возможно, вы используете IE 8 или ранее. И, как drosamsaid, возможно, использовать :nth-of type() вместо этого, если div s не являются единственными детьми в любой контейнер они находятся в.

.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>

Answer 4

Здравствуйте, если вы знаете разметки (HTML) будет все div's вам не нужно использовать клады.

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>

Благодаря T04435.