Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Контекстные селекторы 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: контекстные селекторы, также еще называют селекторами потомков (выборка потомков).

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 25 Окт 2014
Статья обновлена: 5 Фев 2016

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

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

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget