Соседние, родственные и дочерние селекторы в CSS.

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

Соседними называются элементы web-страницы, когда они следуют непосредственно друг за другом в коде документа. Синтаксис:

P + H { Описание правил стиля }

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

<html>
 <head>
  <meta charset="utf-8">
 <title>Соседние селекторы</title>
  <style>
   b + i {
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
   <p>Стиль при такой <b>записи</b> применяется к <i>элементу</i> H</p>
   <p>Но только в том случае, если он <i>является</i> соседним для элемента P и следует сразу после него.</p>
 </body>
</html>

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

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

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

<html>
 <head>
  <meta charset="utf-8">
 <title>Родственные селекторы</title>
<style>
h1 ~ p {
  font-style: italic; /* Наклонный шрифт для всех абзацев */
}
</style>
 </head>
 <body>
<div>
<p>Текст</p>
<h1>Заголовок 1</h1>
<p>Текст</p>
<p>Текст</p>
<h2>Заголовок 2</h2>
<p>Текст</p>
 </div>
<div>
<p>Текст</p>
 </div>
 </body>
</html>

В данном примере стиль применится ко всем тегам <p>, которые следуют после тега <h1> и находятся до закрывающего тега родителя <div>.

Дочерние селекторы

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

P > H { Описание правил стиля }

Стиль применяется к элементу H, только когда он является дочерним для элемента P. Рассмотрим пример:

<html>
<head>
	<title>Дочерние селекторы</title>
	<style>
		p>b { color: red; }
		p>i { color: blue; }
	</style>
</head>
<body>
	<p>Абзац и в нём <b>жирный</b> элемент, и вот <i>наклонный</i> элемент.</p>
	<p>Тут <b>жирный</b> и <u><i>подчёркнутый и наклонный</i></u> элементы.</p>
</body>
</html>

В данном примере тег <i>, в первом абзаце вложен в тег <p>, а во втором он вложен в тег <u>, хотя также является потомком тега <p>. Поэтому во втором абзаце CSS правило для дочернего селектора p>i { color: blue; } не сработает – наклонный текст второго абзаца не будет отображён синим цветом.

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

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

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

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

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

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: