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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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