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

Контекстные селекторы — выборка потомков

Контекстные селекторы в CSS — это выборка потомков элемента.

Схема контекстного селектора выглядит следующим образом:

селектор селектор {
 css-свойства: значения;
}

Между селекторами ставят пробел .

Давайте представим себе ситуацию, что нам нужно назначить CSS-свойства ссылкам размещённым, в абзацах страниц, но при этом чтобы эти CSS-свойства не влияли, на другие ссылки, например находящиеся в меню сайта.

Рассмотрим следующий HTML-документ, красным цветом выделены ссылки:

<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе</title>
 </head>
 <body>
  <h1>Снежный барс</h1>
  <img src="irbis.jpg">
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. <a href="#">Ирбис</a> отличается тонким,
   длинным, гибким телом, относительно короткими лапами, небольшой головой 
   и очень длинным хвостом. Достигая вместе с хвостом длины 200-230 см, весит 
   до 55 кг. Окраска меха светлая дымчато-серая с кольцеобразными и сплошными 
   тёмными пятнами.</p>
  <p>
   Охотится снежный барс в основном на горных козлов и баранов, также в его 
   рационе встречаются <a href="#">кабаны</a>, фазаны и даже суслики.
   В силу труднодоступности местообитания вида, ирбисы до сих пор остаются 
   малоизученными. Однако по приблизительным оценкам их количество варьируется 
   примерно около 10 тысяч особей. По состоянию на 2013 год охота на ирбисов 
   запрещена.</p>
  <h3>Меню сайта</h3>
  <ul>
   <li><a href="#">Снежный барс</a></li>
   <li><a href="#">Полярный волк</a></li>
   <li><a href="#">Полярная сова</a></li>
  </ul>
 </body>
</html>

Для того, чтобы сделать ссылки в абзацах p зелёными, а остальные ссылки (например в меню) не трогать, нужно создать следующий CSS-код:

p a {
 color: green;
}

Контекстные селекторы, могут состоять более чем из 2х тегов (селекторов), например если вы хотите назначить CSS-свойство элементу strong, находящемуся в стандартной ячейке таблицы, а остальные теги strong не трогать (например находящиеся в абзацах p), то ваш CSS-код может выглядеть следующим образом:

table tr td strong {
 css-свойства: значения;
}

Если же вы хотите, чтобы свойства применялись, только в определённых таблицах, у которого есть атрибут класса class="myTable", то CSS-код, может выглядеть так:

.myTable tr td strong {
 css-свойства: значения;
}

И т.д., вариаций можно придумать множество.

PS: контекстные селекторы, также еще называют селекторами потомков (выборка потомков).


Дата публикации поста: 5 февраля 2016
Дата обновления поста: 25 октября 2014
Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free

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

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