3

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

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

1

3 ответа 3

3

Псевдокласс :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>

2
  • попахивает индуским кодом ))
    – ragmon
    21 фев 2017 в 14:45
  • Как пример основу брал для списков <ul><li></li>...</ul> где очень редко прописывают классы для li-элементов. может быть это то что автор и искал ;) согласен пример не из легких) 21 фев 2017 в 15:06
2

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

0

Для добавления стиля к элементам на основе нумерации в дереве элементов используется псевдокласс :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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.