• Страница 1 из 1
  • 1
Форум » III. HTML и CSS » Базовые основы CSS » Родственные селекторы
Родственные селекторы
1
Цитата
Элемент, который следует сразу за другим элементом называется смежным родственным элементом того же уровня.

Например, в коде:

Код
<h1>Добрый день и это отличная новость!</h1>
<div>Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь.</div>


блок div является смежным родственным элементом для h1
Где можно использовать? К примеру, есть заголовок h2, после которого идёт несколько абзацев с текстом.

Код
<h2>Hello, World!</h2>     
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>     

<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>     

<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>


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

Код
h2 + p {   
font-size: 16px;   
color: magenta;   
padding-left: 10px; }

Изменить / Удалить

Форум » III. HTML и CSS » Базовые основы CSS » Родственные селекторы
  • Страница 1 из 1
  • 1
Поиск: