Четверг, 06 Сентября 2012 12:29

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

Written by 
Оцени эту запись
(1 Голос)

В CSS есть возможность получить доступ к соседним и дочерним элементам. 

 

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

 

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

 

Тег1 + Тег2 {стили}

 

Стилибудут применяться к Тегу2 только тогда, когда он следует после Тега1.

 

Пример:

 

<h1>Аннотация</h1>

<p>Аннотация (от лат. annotatio — замечание) или резюме (от фр. résumé — «сокращённый») — краткая характеристика издания: рукописи, монографии, статьи или книги. Аннотация показывает отличительные особенности и достоинства издаваемого произведения, помогает читателям сориентироваться в их выборе.</p>

<p>Аннотация даёт ответ на вопрос: «О чём говорится в первичном документе?»</p>

<p>Перед текстом аннотации присутствуют выходные данные (автор, название, место и время издания) в номинативной форме.</p>

<p>Аннотация содержит основную тему статьи или книги, кроме этого она может перечислять (называть) основные положения описываемого источника.</p>

<p>Аннотация может не упоминать субъект действия (предполагая, что он известен из контекста), и содержать пассивные конструкции — глагольные и причастные.</p>

 

 

Аннотация

Аннотация (от лат. annotatio — замечание) или резюме (от фр. résumé — «сокращённый») — краткая характеристика издания: рукописи, монографии, статьи или книги. Аннотация показывает отличительные особенности и достоинства издаваемого произведения, помогает читателям сориентироваться в их выборе.

Аннотация даёт ответ на вопрос: «О чём говорится в первичном документе?»

Перед текстом аннотации присутствуют выходные данные (автор, название, место и время издания) в номинативной форме.

Аннотация содержит основную тему статьи или книги, кроме этого она может перечислять (называть) основные положения описываемого источника.

Аннотация может не упоминать субъект действия (предполагая, что он известен из контекста), и содержать пассивные конструкции — глагольные и причастные.

 

Здесь применялись такие стили:

<style type="text/css">
h1 + p {margin: 20px 0; font-style: italic;}
</style>
 
 
Как видим, отступ и курсив применились только к первому <p> после <h1>, так как у всех остальных нету среди соседних этого тега.
 
Подобная стилизация очень полезна при оформлении статей. Как в газетных, так и в электронных изданиях, после заголовка статьи идет некоторое предисловия, которое может описать краткое содержание статьи. Традиционно, его оформляют курсивным текстом, который может иметь отличные от других размер или цвет шрифта. Также этот первый абзац иногда обводят рамкой.
 
 
Еще один пример применения соседних селекторов:
 
 
<ul class="children_selectors">
<li><a href="javascript: void(0);">Пункт 1</a></li>

<li><a href="javascript: void(0);">Пункт 2</a></li>

<li><a href="javascript: void(0);">Пункт 3</a></li>

<li><a href="javascript: void(0);">Пункт 4</a></li>

<li><a href="javascript: void(0);">Пункт 5</a></li>

<li><a href="javascript: void(0);">Пункт 6</a></li>

<li><a href="javascript: void(0);">Пункт 7</a></li>

<li><a href="javascript: void(0);">Пункт 8</a></li>

<li><a href="javascript: void(0);">Пункт 9</a></li>

<li><a href="javascript: void(0);">Пункт 10</a></li>

</ul>
 
 
 
 
Здесь прописаны такие стили:
 
<style type="text/css">
.children_selectors li:hover a {color: yellow}
.children_selectors li:hover + li a {color: green}
</style>
 
При наведении на ссылку, ее цвет становится желтым, а цвет следующей ссылки становится злеленым.
 
 

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

 
Дочерними считаются элементы, которые находятся прямо внутри данного родительского элемента. Обращение к доченим элементам имеет такой синтакис:
 
Тег1 > Тег2 {стили}
 
 
Стили будут применяться только к тем Тегам2, которые находятся прямо внутри  Тега1.
 
Пример:
 
 
<div class="menu_chi_sel"> 
<ul>
<li><a href="javascript: void(0);">Пункт 1</a></li>
<li><a href="javascript: void(0);">Пункт 2</a></li>
<li><a href="javascript: void(0);">Пункт 3</a></li>
</ul>
<a href="javascript:void(0);">Ссылка с подчеркиванием</a>
</div>
 
 
 
Здесь используются такие стили:
 

 

<style>
.menu_chi_sel a {text-decoration: none}
.menu_chi_sel > a {text-decoration: underline}
</style>
 
Подчеркнулась только та ссылка, которая лежит непосредственно внутри div'а. Те же ссылки, что лежат внутри списка, остались без подчеркивания.
 
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов