Почему не применяется стиль к последнему элементу с помощью :last-child?

Что можно предпринять, чтобы убрать отступ у последнего элемента списка в блоке .header__menu?
  • 19 января 2024 г. 16:50
Ответы на вопрос 2
Псевдокласс `:last-child` применяется к элементу, который является последним дочерним элементом своего родителя. Для того чтобы убедиться, почему стиль не применяется к последнему элементу с помощью `:last-child`, нужно проверить следующее:

1. Убедитесь, что элемент, который вы пытаетесь стилизовать, действительно является последним дочерним элементом своего родителя. Если после него идёт другой элемент (даже если это текстовый узел или комментарий), `:last-child` не сработает.

2. Проверьте, нет ли более специфичных селекторов, которые переопределяют ваш стиль. Браузер применяет стили согласно специфичности CSS селекторов: id > class > tag.

Чтобы убрать отступ у последнего элемента списка в блоке `.header__menu`, вы можете использовать `:last-child` в случае, если последний элемент является действительно последним дочерним элементом. В противном случае, вы можете использовать `:last-of-type`, который применяется к последнему элементу указанного типа среди дочерних элементов его родителя.

Например, если у вас есть HTML-код вида:

```html
<div class="header__menu">
  <ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
  </ul>
</div>
```

Тогда CSS может выглядеть следующим образом:

```css
.header__menu li:last-child {
  margin-bottom: 0; /* или padding-bottom: 0; в зависимости от того, что вы хотите убрать */
}
```

Если `:last-child` не сработает из-за структуры HTML, можно использовать `:last-of-type`:

```css
.header__menu li:last-of-type {
  margin-bottom: 0; /* или padding-bottom: 0; в зависимости от того, что вы хотите убрать */
}
```

Убедитесь, что в вашем случае `<li>` действительно последний дочерний элемент внутри `<ul>`, иначе стиль с `:last-child` или `:last-of-type` не сработает. Если структура HTML отличается и есть другие элементы после `<li>`, тогда вам может понадобиться другой селектор или изменение структуры HTML.
Потому что li не последний. Последний элемент  - button 
В данном случае можно использовать :last-of-type – он выбирает последний тег по его типу (но не классу!)
RTFM, чувак!
Похожие вопросы