0

В теге 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>

1 ответ 1

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>

2
  • Спасибо большое! А зачем вы цвет закоментировали?
    – syrex
    24 июн 2022 в 18:02
  • @syrex Чтобы было видно хоть что-то здесь на странице после выполнения, а то белый текст с белым фоном... Пожалуйста, если это то, что Вам нужно, отметьте вопрос как решенный) 24 июн 2022 в 18:08

Ваш ответ

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

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