Как дать свойство определённому элементу?

Question

В теге ul у меня есть несколько тегов li. Мне нужно сделать так, чтобы у третьего тега li (О приюте) был паддинг, отличный от того, который я дал всем li в классе. Конечно же, можно просто дать ему ещё один класс, например, pages1 и уже у него уточнить паддинг. Но можно ли сделать это как-то более круто? Думал обратиться к дочерним элементам, но не получилось.

.pages {
    padding-left: 40px;
    padding-top: 30px;
    padding-bottom: 30px;
    height: 20px;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    color: #FFFFFF
}

<body>
    <ul class="header">
        <li><img class="logo" src="img/logo-dogs.svg" alt="logo"></li>
        <li><img class="logo-2" src="img/logo4.svg" alt=""></li>
        <li class="pages">О приюте</li>
        <li class="pages">Питомцы</li>
        <li class="pages">Полезные советы</li>
        <li class="pages">Контакты</li>
    </ul>
</body>

Answer 1

Для этого есть псевдокласс :nth-child()

.pages {
  padding-left: 40px;
  padding-top: 30px;
  padding-bottom: 30px;
  height: 20px;
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  /*color: #FFFFFF */
}


/* .header li:nth-child(3) */
.pages:nth-child(3) {
  padding-left: 100px;
}

<body>
  <ul class="header">
    <li><img class="logo" src="img/logo-dogs.svg" alt="logo"></li>
    <li><img class="logo-2" src="img/logo4.svg" alt=""></li>
    <li class="pages">О приюте</li>
    <li class="pages">Питомцы</li>
    <li class="pages">Полезные советы</li>
    <li class="pages">Контакты</li>
  </ul>
</body>

БЛОГ НА HUSL

Как дать свойство определённому элементу?

Ответы (1 шт):