Помогите разобраться с селекторами css

253

24 февраля 2017, 01:52

Как например задать класс второму по счету div, или задать только первому нужные стили, если у каждого однаковые названия классов? Немного не понятно с уровнями, как правильно задавать по уровню, что бы не плодить css классы?

<div class="selector"> 
  <div class="classname"></div> 
  <div class="classname"></div> 
  <div class="classname"></div> 
  <div class="classname"></div> 
</div>

Answer 1

Для добавления стиля к элементам на основе нумерации в дереве элементов используется псевдокласс :nth-child:

.class:nth-child(odd | even | <число> | <выражение>) {...
    // Styles
}

Значения

odd - Все нечетные номера элементов.

even - Все четные номера элементов.

число - Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.

выражение - Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2...

Примеры

В вашем случае для стилизации второго элемента используйте псевдокласс :nth-child(2):

.child{ 
   background:green; 
   width:150px; 
   height:100px; 
} 
 
.child:nth-child(2){ 
   background:#ccc; 
   width:100px; 
   height:50px; 
}

<div class="selector"> 
   <div class="child"></div> 
   <div class="child"></div> 
   <div class="child"></div> 
</div>

А для стилизации первого элемента используйте псевдокласс :nth-child(1) или же :first-child:

.child{ 
   background:green; 
   width:150px; 
   height:100px; 
} 
 
.child:first-child{ 
   background:#ccc; 
   width:100px; 
   height:50px; 
}

<div class="selector"> 
   <div class="child"></div> 
   <div class="child"></div> 
   <div class="child"></div> 
</div>

Answer 2

Псевдокласс :nth-child Вам в помощь уважаемые ;) Дальше уже дело креатива) https://webref.ru/css/nth-child

.selector div { 
  background-color:black; 
  height:30px; 
  margin-bottom:2.5px; 
} 
 
.selector div:nth-child(1) { 
  background-color:red; 
} 
.selector div:nth-child(2) { 
  background-color:green; 
} 
.selector div:nth-child(3) { 
  background-color:blue; 
} 
.selector div:nth-child(4) { 
}

<div class="selector"> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
</div>

Answer 3

.child{ 
background:red; 
width:150px; 
height:100px; 
} 
 
.child:nth-child(2){ 
background:#ccc; 
width:100px; 
height:50px; 
}

<div class="selector"> 
<div class="child"></div> 
<div class="child"></div> 
<div class="child"></div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Exception-safe coding [требует правки]

Порекомендуйте материалы по написанию кода на C++ с механизмом обработки исключений со строгими гарантиямиОчень приветствуются примеры...

266

c++

Как найти позицию итератора?

Есть вектор строкПрохожу в цикле по каждой строке, и в каждой строке опять в цикле прохожу по каждому символу и ищу '0'

253

c++

Как достать файл из MFT?

DeviceIoControl с использованием управляющего кода FSCTL_GET_RETRIEVAL_POINTERS позволяет извлечь информацию о физическом расположении файла на дискеОднако,...

396

c++

Очередь через массив

Доброго времени суток! Нужно создать очередь на основе массиваПоняла это буквально и написала так

301