18 марта 2010

Работаем с селекторами 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

———————-
Продукты компании 1С для автоматизации деятельности известны если не всем, то, пожалуй, большинству владельцев предприятий, но вот что касается вопроса 1с предприятие цена, то тут многим руководителям нужно просто выделить немного времени и убедиться, что она очень даже демократична и ниже чем на конкурирующие продукты.

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

Комментариев: 2

Вы можете следовать любому комментарию через RSS 2.0 feed.

Вы можете оставить комментарий или trackback с вашего сайта.

  1. Какой то простенький селектор. С J QUERRY лучше делать)

Оставьте комментарий

Обведите фигуру по линии:

Ставим WordPress на локальном копьютере