Css

 В избранное 
Материал из Интервики
Перейти к: навигация, поиск

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

Комбинатор символ плюс (+) или соседний селектор

<селектор 1> + <селектор 2> { стиль }

Стиль применяется к селектору 2 в том случае, если он является соседним для селектора 1 и идет сразу после него, то есть они стоят рядом. Пример:

<style>

strong + i { font-size: 33px; }

</style>

<strong> текст </strong> текст <i> текст с примененным стилем </i>

Комбинатор тильда (~)

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

<селектор 1> ~ <селектор 2> { стиль }

Пример:

<style>

strong ~ i { color: red; }

</style>

<p> текст <strong> жирный текст </strong> обычный текст <i> красный текст </i></p>

<p> текст. <strong> жирный текст </strong> <span> обычный текст </span> <i> красный текст </i> </p>

Комбинатор - дочерние селекторы >

Привязывает стиль к элементу, непосредственно вложенному в другой элемент:

<селектор 1> > <селектор 2> { стиль }

Пример:

<style>

div > strong { font-style: italic }

</style>

<div>обычный текст <strong> жирный курсивный текст </strong>

<p> обычный текст. <strong> жирный текст</strong></p>

</div>

Селектор <пробел>

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

Пример:

<style>

div strong { font-style: italic }

</style>

<div> обычный текст <strong> жирный курсивный текст </strong>

<p> обычный текст <strong> курсивный жирный текст </strong> </p>

</div>

<p> текст <strong> жирный текст </strong></p>