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