Что такое родственные элементы в css
Перейти к содержимому

Что такое родственные элементы в css

  • автор:

Комбинаторы

Наконец мы рассмотрим селекторы, которые называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе.

Необходимые условия: Базовая компьютерная грамотность, установленное базовое программное обеспечение, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Цель: Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS.

Комбинатор потомка

Селектор потомка — обычно представляется символом пробела (» «) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются селекторами потомка.

Дочерний комбинатор

Дочерний комбинатор (>) помещается между двумя селекторами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы , которые являются дочерними элементами , селектор пишется так:

css

Соседний родственный комбинатор

Соседний родственный селектор (+) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы , которые идут сразу после элементов :

css

Общий родственный комбинатор

Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (~). Чтобы выбрать все элементы , которые находятся в любом месте после элементов , надо указать так:

css

Использование комбинаторов

Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом "a", которые являются прямыми потомками , можно использовать следующую комбинацию:

css
ul > li[class="a"]  > 

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

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

Проверьте ваши навыки!

Мы охватили много тем в этой статье. А вы можете вспомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите Проверьте ваши навыки: Селекторы.

Двигаемся дальше

Это последний раздел в наших уроках по селекторам. Далее мы перейдём к другой важной части CSS — CSS модель коробки.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Часть 4. Соседние и родственные селекторы

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

Соседние селекторы

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

Пример: допустим, вам необходимо, чтобы каждый абзац

, который идет первым после заголовка , имел наклонный шрифт. Это можно реализовать с помощью такого кода CSS:

Записывая это правило, в первую очередь необходимо указать имя первого соседа, затем добавить символ + и имя второго соседа (того, к которому мы желаем применить стиль). Можно создавать и более длинные комбинации. Схема написания селектора такая: selector1+selector2+…+selectorN <> (стиль применяется к selectorN ).

/* Отступ от абзаца до картинки 30px */ p+img < padding-top: 30px; >/* Зеленый цвет для абзаца, который следует после h3 в связке с h2 */ h2+h3+p

Родственные селекторы

Родственные селекторы (другие названия: сестринские, сиблинговые) позволяют выбирать элементы HTML-страницы, являющиеся родственными по отношению друг к другу (то есть имеющие общего родителя и находящиеся на одном уровне). Сестринские селекторы похожи на соседние, но отличаются тем, что стиль применяется ко всем элементам выбранного типа, а не только к первому из них. Вместо знака + используется символ тильда ~ .

Пример: немного изменим предыдущую задачу и представим, что вам нужно сделать наклонный шрифт для всех абзацев

, которые идут после заголовка . Код CSS будет выглядеть так:

h1 ~ p

…и немного HTML для примера:

 

Текст

Заголовок 1

Текст

Текст

Заголовок 2

Текст

Текст

Взгляните на HTML-код: стиль применится ко всем тегам

, которые следуют после тега и находятся до закрывающего тега родителя . В нашем варианте насчитывается 3 элемента

, к которым применится стиль. Обратите внимание, что тег этому никак не помешает. Заметьте также, что в данном случае стиль не будет применен к тому тегу

, который находится над , а также к тегу

, имеющему другого родителя .

Выводы

Используя соседние (смежные) селекторы, вы можете применять стиль к элементу в случае, когда он следует сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.

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

Перейдя к следующей подглаве, вы познакомитесь с селекторами атрибутов.

Что такое родственные элементы в css

Селектор обобщенных родственных элементов

  • Селекторы помогают верстальщику накладывать на различные элементы стиль, легко захватывая нужные, обходя не нужные, и новизна этого селектора не делает его исключением. Селектор обобщенных родственных элементов (СОРЭ) — это инструмент помогающий выбирать элемент или элементы, идущие следом за заданным. На практике он выглядит в виде цепочки из заданного и выбираемого элемента, соединённых между собой знаком «~». Стоит отметить, что он будет работать только при наличии у элементов общего родителя. Пример, зададим спискам, идущим после абзаца левый отступ:

    .content p~ul  margin-left: 30px; >

    Взглянем на селектор обобщённых родственных элементов более детально. СОРЭ, является одним из новых селекторов, он впервые встречается в 3-ей спецификации CSS, и охватывает все элементы, идущие непосредственно за тем, который в цепочке пишется первым. Это единственное, что отличает его от сестринского, который выбирает только один элемент. Рассмотрим это на примере: CSS

    p~span  color: red; >
    span>Текст стандартного цветаspan> p> Текст стандартного цвета p> span> Текст красного цвета span> span> Текст красного цвета span> div class=”intext”> span> Текст стандартного цвета span> div> span> Текст красного цвета span>

    Следовательно, все span, идущие после «p» будут красного цвета, кроме того, который внутри div потому, что у него разный родитель с «p».

    Стоит отметить

    При использовании этого селектора нужно быть крайне аккуратным, поскольку его применение не всегда очевидно, да и Internet-Explorer шестой версии его не воспринимает.

    Где его можно встретить?

    Селектор в меру своей новизны, крайне специфичен, а на практике встречается очень редко. Поэтому область, в которой он бы мог привнести весомое значение придумать очень сложно.

    Комбинированные селекторы

    Хотите прокачать свои фронтенд-скиллы? — тогда мы идем к вам. В этой статье мы научим вас экономить свое время, писать понятный код для окружающих и вырасти в глазах коллег за счет использования различных комбинаторов.

    Если вы уже разобрались в том, что такое HTML-селекторы и селекторы классов, стоит изучить продвинутые методы CSS программирования. Эти методы помогут вам лучше ориентироваться в коде и облегчат задачи разработки.

    Комбинированные селекторы — это сочетания, уже известных вам селекторов CSS, которые позволяют комбинировать несколько типов селекторов для более точного выбора элементов или их групп, основываясь на их положении в документе или отношениях с другими элементами.

    Группировка

    Группирование селекторов используется для лаконичного написания кода за счет перечисления элементов с одними и тем же стилевым оформлением.

    Пример без группировки

    h2 < font-size: 16px; >p < font-size: 16px; >.text

    Пример с группировкой

    h2, p, .text

    Объединение

    Прием объединения селекторов применяется только для классов и атрибутов и повышает специфичность. Стили будут применены ко всем элементам, содержащим все перечисленные селекторы.

    Правило записи: .class1.class2

    Пример:

    .class1.class2
    Этот DIV будет содержать текст помидорного цвета
    Данный DIV будет иметь цвет по умолчанию

    Вложенные селекторы

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

    Селектор потомка

    Селекторы потомков выбирают все потомки указанного элемента, независимо от их глубины вложенности.

    Правило записи: element1 element2

    Пример:

    .parent p

    Здесь будут выбраны все p элементы, которые являются потомками элемента с классом "parent", независимо от того, насколько глубоко они вложены.

     

    Этот параграф будет выбран с помощью селектора потомка.

    Span не будет выбран.

    Этот параграф будет выбран с помощью селектора потомка.

    Селектор дочерних элементов

    Дочерние селекторы позволяют выбирать элементы, находящиеся непосредственно внутри других элементов. Используется при этом символ ">".

    Правило записи: element1 > element2

    Пример:

    .parent > p

    В этом случае будут выбраны только p элементы, которые являются непосредственными детьми элемента с классом "parent".

     

    Этот параграф будет выбран с помощью дочернего селектора.

    Span не будет выбран.

    Данный параграф является потомком, но не будет выбран.

    Смежные селекторы

    Смежные селекторы (или комбинаторы) в CSS позволяют выбирать элементы HTML-страницы, которые стоят рядом друг с другом и имеют общего родителя. Первый элемент должен быть соседом второго элемента, чтобы смежный селектор сработал.

    Правило записи: element1 + element2

    Пример:

    h1 + p

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

    Абзац красного цвета

    Абзац красного цвета

    Абзац цвета по умолчанию

    Родственные селекторы

    Родственные селекторы позволяют выбирать элементы, имеющие общего родителя и находящиеся на одном уровне. Сиблинговые селекторы похожи на смежные, но отличие состоит в том, что стиль применяется ко всем элементам выбранного типа, а не только к первому из них.

    Правило записи: element1 ~ element2

    Пример:

    h2 ~ p

    Cтиль применится тегам p, следующим после тега h2 и стоящим до закрывающего тега родителя div.

     
    Стиль по умолчанию

    Стиль по умолчанию

    Стиль по умолчанию

    Стиль применится

    Стиль применится

    Стиль по умолчанию

    Стиль применится

    Стиль по умолчанию

    Обратите внимание, что тег h3 этому никак не помешает. В данном случае стиль не будет применен к тому тегу p, который находится над h2, а также к тегу p, имеющему другого родителя div.

    Методология BEM

    Методология была разработана Яндексом для быстрого создания сайтов и их легкой поддержки при расширении в дальнейшем. Сейчас такие крупные российские и зарубежные компании, как Google, Epam, Яндекс, Альфа-Банк, BuzzFeeed, используют BEM на своих проектах.

    BEM (БЭМ: Блок, Элемент, Модификатор) — это методология именования классов в СSS, создающая компонентный подход в работе над проектом, где интерфейс делится на переиспользуемые блоки.

    В методологии BEM не рекомендуется использовать комбинированные селекторы вида .element1.element2, так как они имеют более высокую специфичность и создают сложности в переопределнии. Вместо этого в небольшом количестве можно использовать вложенные селекторы.

    Софья Пирогова

    Софья Пирогова

    автор статей / копирайтер

    Вам может также понравиться.

    Как в Python преобразовать список в строку

    Как в Python преобразовать список в строку

    Класс в JavaScript: базовый синтаксис и примеры. Часть вторая

    13 дек. 2023 г.

    Класс в JavaScript: базовый синтаксис и примеры. Часть вторая

    Класс в JavaScript: базовый синтаксис и примеры. Часть первая

    30 нояб. 2023 г.

  • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *