Как выбрать каждый 1-й и 3-й элемент с nth-child?

Question

У меня есть div с классом .publication и шириной 33%, поэтому в строке есть три div:

<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>

Я хочу настроить таргетинг на каждый первый и третий элемент каждой "строки".

Я думал, что это сработает, но это не работает.

.publication:nth-child(3n+1) {

}

Answer 1

Я также нашел другую возможность без: nth-child ()

 .container { 
     display: flex; 
     flex-wrap: wrap; 
     justify-content: space-between; 
  }

 .publication { 
     max-width: 33%; 
     width: 100%; 
 }

 <div class="container">
     <div class="publication">lorem ipsum</div>
     <div class="publication">lorem ipsum</div>
     <div class="publication">lorem ipsum</div>
     <div class="publication">lorem ipsum</div>
     <div class="publication">lorem ipsum</div>
     <div class="publication">lorem ipsum</div> 
 </div>

Answer 2

Вам понадобится 2 селектора для первой и третьей каждой строки:

body {
  display: flex;
  flex-wrap: wrap;
}

body :nth-child(3n+1), /* every first in row */
body :nth-child(3n) {  /* every third in row */
  background: blue;
}

.publication {
  width: 33.33333%;
}

<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>

Answer 3

Вы можете использовать not() и иметь только один селектор. 1-й и 3-й элемент не 2-й элемент

.publication:not(:nth-child(3n+2)) {
  background: blue;
}

.publication {
  width: 33.33333%;
  float: left;
}

<div class="container">
  <div class="publication">lorem ipsum</div>
  <div class="publication">lorem ipsum</div>
  <div class="publication">lorem ipsum</div>
  <div class="publication">lorem ipsum</div>
  <div class="publication">lorem ipsum</div>
  <div class="publication">lorem ipsum</div>
  <div class="publication">lorem ipsum</div>
  <div class="publication">lorem ipsum</div>
  <div class="publication">lorem ipsum</div>
  <div class="publication">lorem ipsum</div>
  <div class="publication">lorem ipsum</div>
</div>

Answer 4

Вам нужно одно правило для выбора первого элемента в каждой строке и отдельное правило для выбора последнего элемента в каждой строке.

.publication:nth-child(3n), .publication:nth-child(3n+1) {
}

<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>