Четверг, 18 марта 2010
No Comments

Дело № 27: Работаем с селекторами CSS.Часть 1

css

Об основах работы с селекторами CSS я написал ранее.
Теперь давайте рассмотрим селекторы, которые формируются на основе структуры документа (страницы HTML).

Структурные селекторы

Селектор-потомок или контекстный селектор
Это первый тип селектора, который мы рассмотрим. Благодаря этому типу селектора, можно применять стили к элементам, которые являются “потомками” по отношению к другим. Все, что вам нужно сделать, это написать различные элементы, разделив их пробелом, начиная от предка к потомку. Например так:

div li { color: red; }

Это правило нужно читать справа налево: “Выбрать все элементы <li>, которые являются потомками <div> и изменить их цвет на красный.”
Количество элементов не ограничивается только двумя, их может быть три и более. Все зависит от конкретной ситуации:

div ol li { color: red; }

Здесь правило CSS можно прочесть например так: “Выбрать все элементы <li>, которые являются потомками <ol> и <div> и изменить их цвет на красный.”

Чтобы разобрать следующее правило, нужно предварительно ознакомиться с Основы: Работаем с селекторами CSS

body.width-wide div.wpr {
width:930px;
}

Это правило прочесть можно так: “Сделать ширину элемента <div> класса wpr в 930 пикселей, если он является потомком элемента <body> класса width-wide.
Конечно использование ID и Class дают более широкие возможности для работы.

Замечание относительно терминологии. Вместо термина потомок может использоваться термин – контекстный селектор, поскольку для корректной работы стилей этих тегов они используются только в определенном контексте.

Дочерний селектор
Теперь разберем что такое дочерний селектор. Это когда выбираются элементы, которые находятся  прямо сразу за родительским элементом. Запись правила делается просто, все что вам нужно сделать, это отделить различные элементы, как в примере ниже:

p > strong {color: red;}

Это правило может быть прочитано так: “Выделить все <strong> элементы, только если они являются дочерними от <p> элемента, а затем сделать их красными”. Следовательно, все другие <strong> элементы, которые находятся на веб-странице не будет зависеть от этого правила.

Чтобы наглядно представить что является дочерним элементом, а что нет:

<div>
  <p><strong>Текст дочернего элемента,который будет красным</strong></p>
  <p><i><strong>Текст параграфа не будет красным</strong></i></p>
</div>

Во втором параграфе цвет не изменится поскольку <strong> находится внутри другого элемента и не является дочерним по отношению к <p>.

Смежные или соседние селекторы
Теперь мы переходим к селекторам, которые впервые были введены в CSS2. Заданный стиль относится только к тем элементам, которые прилегают друг к другу. При написании этого правила, все, что вам нужно сделать, это добавить символ “+” между прилегающими элементами:

h2 + p {color: blue;}

Вот пример использования смежных селекторов:

<h2>Заголовок статьи</h2>
<p>Это параграф, следующий за заголовком. Он будет синим</p>

Это правило может быть прочитано так: “Вывести синим параграф <p>, при условии, что он следует за элементом <h2>”.

Статьи по теме Таблицы CSS

Статьи по теме
Статья оказалась полезной? Подпишись на RSS рассылку или следуй за мной на твиттере @wpstarter или по этой ссылке wpstarter

Рубрика: каскадная таблица стилей CSS


Оставьте комментарий(поставьте галочку "Я не робот")

Я не робот.