CSS - различие nth-of-type

Содержание

Вопрос или проблема
Ответ или решение
Проблема
Решение
Объяснение
Применение и преимущества
Важные заметки
Заключение

Вопрос или проблема

Я уверен, что это возможно, но не знаю, как достичь этого с помощью CSS.

Я хочу нацелиться на 3-й экземпляр класса первый раз, когда группа найдена, и на 2-й экземпляр во второй раз, когда она найдена.

Вот упрощенный пример того, с чем я работаю:

<div class="foo">
  <div class="bar">Не цель</div>
  <div class="bar">Не цель</div>
  <div class="bar">ЦЕЛЬ</div>
  <div class="bar">Не цель</div>
</div>
<div class="foo">
  <div class="bar">Не цель</div>
  <div class="bar">ЦЕЛЬ</div>
</div>

Можно ли этого достичь?
P.S. Я пытаюсь достичь этого, не редактируя HTML, только CSS

Я пробовал различные комбинации nth-of-type и т.д., но не имею достаточно опыта, чтобы разобраться!

Вот одно возможное решение. nth-of-type также можно заменить на nth-child, но в обоих случаях это зависит от того, есть ли другие элементы-соседи (без классов или с другими классами) на том же уровне, в этом случае оба не будут работать одинаково.

(nth-of-type работает только если элемент является n-ным элементом любого типа внутри его родителя и имеет указанный тип и класс)

.foo:nth-of-type(1)>.bar:nth-of-type(3) {
  color: red;
}
.foo:nth-of-type(2)>.bar:nth-of-type(2) {
  color: red;
}

<div class="foo">
  <div class="bar">Не цель</div>
  <div class="bar">Не цель</div>
  <div class="bar">ЦЕЛЬ</div>
  <div class="bar">Не цель</div>
</div>
<div class="foo">
  <div class="bar">Не цель</div>
  <div class="bar">ЦЕЛЬ</div>
</div>

В дополнение к решению Иоганнеса, мы можем нацелиться чуть более точно, используя nth-child(n of x), если есть промежуточные элементы.

div:nth-child(1 of .foo)> :nth-child(3 of .bar) {
  color: red;
}

div:nth-child(2 of .foo)> :nth-child(2 of .bar) {
  color: red;
}

.foo,
.non {
  margin-bottom: .5em;
  outline: 1px solid grey;
}

<div class="foo">
  <div class="bar">Не цель</div>
  <div class="bar">Не цель</div>
  <div class="bar">ЦЕЛЬ</div>
  <div class="bar">Не цель</div>
</div>
<div class="non">
  <div class="bar">Не цель</div>
  <div class="bar">Не цель</div>
  <div class="bar">ЦЕЛЬ</div>
  <div class="bar">Не цель</div>
</div>
<div class="foo">
  <div class="bar">Не цель</div>
  <div class="not">Не цель</div>
  <div class="bar">ЦЕЛЬ</div>
</div>

Я выяснил, как это сделать.

.foo:nth-of-type(1) .bar:nth-of-type(3),
.foo:nth-of-type(2) .bar:nth-of-type(2) {
  color:yellow;
}

Ответ или решение

Запрос на использование CSS для выборки конкретных элементов в структуре HTML является распространенной задачей среди веб-разработчиков. В данном случае необходимо выделить специфичные элементы второго уровня, располагающиеся внутри родительских контейнеров с классом foo.

Проблема

Вы хотите применить стили к третьему элементу с классом bar в первом родительском div, а ко второму элементу с классом bar во втором родительском div, не изменяя HTML-разметку. Это требует использования псевдоклассов, таких как nth-of-type, в CSS.

Решение

Использование селекторов nth-of-type позволяет эффективно выбирать нужные элементы. В приведённом ниже коде показан правильный синтаксис для добавления стилистических свойств:

.foo:nth-of-type(1) .bar:nth-of-type(3),
.foo:nth-of-type(2) .bar:nth-of-type(2) {
  color: yellow;
}

Объяснение

Структура селектора:
- .foo:nth-of-type(1) выбирает первый элемент с классом foo.
- .bar:nth-of-type(3) выбирает третий элемент с классом bar, который находится внутри первого .foo.
Аналогично, для второго контейнера:
- .foo:nth-of-type(2) выбирает второй элемент с классом foo.
- .bar:nth-of-type(2) выбирает второй элемент с классом bar во втором контейнере.
Множественные выборки:
- Используя запятую, можно комбинировать выборки, чтобы применить одинаковые стили к нескольким элементам.

Применение и преимущества

Данный подход позволяет применять стили только к нужным элементам без изменения HTML-разметки, что может быть особенно полезно в случаях, когда доступ к исходному коду ограничен или когда структура HTML меняется.

Важные заметки

nth-of-type работает по сравнению с типом элемента, поэтому, если в родительском контейнере есть другие элементы (например, div, span и т.д.), их количество может повлиять на расчет.
Если потребуются специфические стили для других экземпляров элемента, просто добавьте дополнительные правила, используя аналогичный подход.

Заключение

Таким образом, с помощью CSS можно гибко управлять визуальным представлением определённых элементов на веб-странице, что позволяет сделать интерфейс более наглядным и удобным для пользователя. Учитывая, что CSS на сегодняшний день является основным инструментом стилизации веб-сайтов, знание его возможностей является ключевым для каждого веб-разработчика.

CSS – различие nth-of-type