CSS выборка определенных элементов

252

09 сентября 2018, 13:10

Пример https://jsbin.com/qicozaroxo/edit?html,css,output

Подскажите как выбрать элементы которые подсвечены желтым цветом.

Самое главное условие - у этих элементов не может быть добавлен класс (класс selected был добавлен для наглядности) и структура html тоже не должна быть изменена (то есть нельзя отдельные блоки оборачивать во всякие врапперы и прочее). неизмена Блоки идут друг за другом.

Пробовал с nth-child и nth-of-type - но никак не могу подобрать формулу

Answer 1

.card { 
  height: 20px; 
  width: 20px; 
  float: left; 
  box-sizing: border-box; 
  border: 1px solid #000; 
} 
 
.wrapper { 
  width: 60px; 
} 
 
.card:nth-of-type(n) { 
  background-color: red; 
} 
 
.card-row { 
  float: left; 
  height: 20px; 
  width: 100%; 
  background-color: green !important; 
} 
 
.wrapper div .card:nth-child(3n+2) { /* и это */ 
  background-color: yellow !important; 
}

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width"> 
  <title>JS Bin</title> 
</head> 
<body> 
  <div class="wrapper"> 
    <div> <!-- это --> 
      <div class="card"></div> 
      <div class="card selected"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card selected"></div> 
      <div class="card"></div> 
    </div> 
    <div class="card-row"></div> 
    <div><!-- это --> 
      <div class="card"></div> 
      <div class="card selected"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card selected"></div> 
      <div class="card"></div> 
    </div> 
    <div class="card-row"></div> 
    <div><!-- это --> 
      <div class="card"></div> 
      <div class="card selected"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card selected"></div> 
      <div class="card"></div> 
    </div> 
  </div> 
     
</body> 
</html>

Могу предложить такое решение, просто оборачивай группу квадратов в div + формула 3n+2