Поймите различные способы использования операторов «+» и «~» в Css и то, как они влияют на стиль.

Когда дело доходит до выбора элементов на странице, существует множество различных селекторов. В этой статье мы более подробно рассмотрим два конкретных селектора: селектор «+» и селектор «~». Эти селекторы могут использоваться для выбора определенных элементов на странице и часто используются в сочетании с другими селекторами CSS для создания сложных правил оформления веб-страниц.

Селектор «+»

Селектор «+» — это селектор CSS, который нацелен на следующий родственный элемент, который следует сразу за выбранным элементом. Это означает, что селектор будет соответствовать только элементам, которые идут сразу после элемента в разметке HTML. Давайте посмотрим на пример:

p + span {
  color: red;
}

В этом примере мы используем селектор «+» для нацеливания на элемент span, который следует сразу за элементом абзаца. Когда это правило CSS применяется к HTML-документу, любой элемент span, который следует сразу за элементом абзаца, будет иметь красный цвет текста.

Стоит отметить, что селектор «+» соответствует только первому вхождению элемента, который следует непосредственно за выбранным элементом. Другими словами, если есть несколько одноуровневых элементов, которые идут сразу после выбранного элемента, только первый элемент будет соответствовать селектору «+».

Селектор «~»

Селектор «~» — это еще один селектор CSS, предназначенный для родственных элементов, но с ключевым отличием. Вместо того, чтобы нацеливаться только на следующий родственный элемент, который следует сразу за выбранным элементом, селектор «~» нацеливается на все родственные элементы, которые следуют за выбранным элементом, независимо от их положения в HTML-разметке. Давайте посмотрим на пример:

p ~ span {
  color: blue;
}

Стоит отметить, что селектор «~» будет соответствовать всем родственным элементам, которые следуют за выбранным элементом, а не только первому вхождению. Это может быть полезно для нацеливания на группы элементов, которые имеют общий родительский элемент, но не обязательно отображаются в определенном порядке в разметке HTML.

Ключевые различия между селекторами «+» и «~»

Селектор «+» нацелен только на следующий элемент того же уровня, который следует сразу за выбранным элементом, а селектор «~» нацелен на все элементы того же уровня, которые следуют за выбранным элементом.

Когда использовать каждый селектор

Знание того, когда использовать каждый селектор, необходимо для создания эффективных правил CSS. Вот несколько рекомендаций по использованию селектора «+» и селектора «~»:

  • Используйте селектор «+», если вы хотите настроить таргетинг на определенный родственный элемент, который идет сразу после выбранного элемента.
  • Используйте селектор «~», если вы хотите настроить таргетинг на группы родственных элементов, которые имеют общий родительский элемент, но не обязательно отображаются в определенном порядке в разметке HTML.
  • Если вы сомневаетесь, поэкспериментируйте с обоими селекторами, чтобы увидеть, какой из них дает желаемый результат.

Заключение

С помощью селектора «+» вы можете настроить таргетинг на определенные одноуровневые элементы, которые идут сразу после выбранного элемента, а селектор «~» позволяет вам нацеливаться на группы одноуровневых элементов, которые имеют общий родительский элемент.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .