Почему не убирается блок?

Question

[David King]

Пытаюсь скрыть последний блок .bg-img, когда ширина экрана становится меньше 550 пикселефф, но он не скрывается.

Comments

[Ankhena]

последний блок .bg-img

Не скрывается он потому что он хоть и последний .bg-img, но не является :last-child.

Вот так сработает: .bg-img:nth-last-child(4) {}
Но ведь нет гарантии, что не добавится еще скриптов, а они тоже являются дочерними элементами.

Так что, лучше добавьте класс нужному элементу.

Answer 1

[Николай Шабалин]

У вас селектор .bg-img:last-child не находит элемент. Поэтому нужно подобрать подходящий селектор.

Я бы на вашем месте на необходимый элемент добавил дополнительный класс, например bg-img-tablet и уже его скрывал на нужных разрешениях экрана.

Comments

[David King]

Я пытался и через дополнительный класс и через :nth-last-child, но ничего не сработало

[David King]

Сработало с классом, но не пойму почему он не находит через :last-child и ему подобным.

[Николай Шабалин]

А всё очень просто. :last-child - находит любой элемент, являющийся последним в его родителе. Когда вы ищите с помощью селеткора `:last-child`, то не учитывается тип элемента.

Например, в

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

li:last-child {
  background-color: rebeccapurple;
}

вам может показаться, что вы ищите последний <li>, но нет вы ищите последний элемент в родителе. Это легко проверить. Для этого нужно сделать блок с разными элементами

<div class="wrapper">
    <span class="element">span</span>
    <div class="element">div</div>
    <p class="element">p</p>
</div>

.element:last-child {
  background-color: rebeccapurple;
}

Параграф станет фиолетового цвета, а теперь посмотрите, что будет если оставить .element только на <div>

<div class="wrapper">
    <span>span</span>
   <div class="element">div</div>
    <p>p</p>
</div>

вы не увидите фона ни на <div class="element">div</div> ни на <p>p</p>. Потому что селектору :nth-child последний элемент <p> не соответствует из-за отсутствия класса .element.

[David King]

Николай Шабалин, понял, спасибо огромное!