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

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

ссылаются на элемент, расположенный непосредственно после другого обозначенного элемента. Таким образом, если на странице имеется следующий HTML-код:

HTML

<h2>Зоголовок</h2>
<p>Параграф окрашенный белым</p>
<p>Параграф окрашенный в черный цвет</p>

CSS

p {color:#000;}
    h2+p {color:#fff;}

При этом только первый абзац отобразится в белом (#fff) цвете. Второй элемент р не является смежным с h2 и потому его текст выводится черным шрифтом (#000), что указано в первом правиле для элемента p.

Контекстные селекторы

Если в документе расположено несколько элементов, каждому открывающему тегу <p> элемента можно задать атрибут класса. Однако гораздо лучше указать атрибут class со значением (tarara, к примеру) для элемента, служащего контейнером, а затем изменить необходимое свойство каждого расположенного внутри контейнера элемента. Для этого необходимо прописать всего одно правило стиля с использованием контекстного селектора.

HTML

<div class="tarara">
         <p>Параграф1 </p>
         <p>Параграф2 </p>
</div>

CSS

p {color:#000;}
.tarara p {color:#fff;}

Контекстные селектор состоит из списка селекторов разделенных пробелами, идущих от внешних к внутренним элементам страницы. В данном примере имеется элемент div класса tarara ,и контекстный селектор .tarara p, который ссылается на все элементы р, расположенные внутри этого div.

Для того чтобы применялость контекстное правило, последовательность вложений не должна точно совпадать с контекстным селектором