#фишка дня

Мне очень понравился этот бред, так что в рамках субботы очень даже пойдёт.

Итак, как найти первое вхождение элемента на странице, даже если он — вложен где-то внутри другого? Можно же так?

Вы не поверите, можно!

Код:

.target {
  &:nth-child(1 of &):not(:has(&) ~ * *):not(:has(&) ~ *):not(& ~ * *):not(& *) {
    /* your CSS here  */
  }
}

Итак, что же тут происходит?

✅ Это первый элемент среди своих сиблингов с таким же классом (&:nth-child(1 of &))
✅ Это не потомок элемента с таким же классом (:not(& *))
✅ Это не потомок элемента, перед которым находится элемент с таким же классом (:not(& ~ * *))
✅ Перед ним нет элемента, который содержит элемент с таким же классом (:not(:has(&) ~ *))
✅ Это не потомок элемента, перед которым находится элемент, содержащий элемент с таким же классом (:not(:has(&) ~ * *))

Как вам такое? :)

Демо: https://codepen.io/alinaki/pen/NWQzzv

Оригинал: https://css-tip.com/first-element-dom/

Естественно, есть похожее решение для последнего элемента: https://css-tip.com/last-element-dom/

#css #has #dom