Сложные конструкции селекторов - составные селекторы

 Сложные конструкции селекторов

 

Рассмотрим более сложные конструкции селекторов, в частности - составные селекторы, т.е. такие, которые могут состоять из некоторого количества простых селекторов.

1) Группировка - используется, когда необходимо задать одинаковые правила для разных элементов. Для этого простые селекторы перечисляются через запятую, например

h1, h2, h3, h4, h5, h6 {

         color: blue;

}

#header, #footer, .bar {

         margin: 5px;

}

Таким образом одинаковые стилевые правила будут заданы для разных тегов, классов или идентификаторов, указанных через запятую.

 

2) Вложение - используется, когда необходимо применить правила к элементам, которые заведомо расположены внутри других. При этом не имеет значения - непосредственно внутри, либо на некотором уровне. Например,

<div class='foo'>

  <div class='bar-1'>

    Hello-1

    <div class='bar-2'>Hello-2</div>

  </div>

</div>


Тогда оба перечисленных класса bar-1 и bar-2 будут вложенными в foo.

Для описания таких селекторов между простыми селекторами пишут символ пробел. При этом вложенным селектором должен быть тот, который справа. Рассмотрим пример вложенного селектора:

.foo .bar-2 {

         color: blue;

}


Это означает, что указанные правила будут применены ко всем классам bar-2 которые находятся внутри foo

3) Дочерний селектор - используется в том случае, когда надо описать правила для непосредственного вложения одного элемента в другой. В примере выше дочерним селектором для foo будет именно bar-1, а не bar-2.

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

.foo > .bar-1 {

         color: blue;

}


4) Сестринские (соседние) селекторы - используются, когда необходимо задать правила для элемента, который находится непосредственно после другого, например

 

<div class='bar-1'>Hello-1</div>

<div class='bar-2'>Hello-2</div>



Тут элементы с классами bar-1, bar-2 находятся рядом и не вкладываются один в другой. Сестринские селекторы описываются при помощи символа +, который прописывается между двумя селекторами, и при этом правила будут применяться к тому селектору, который написан справа от знака +. В данном случае стилевые правила с селектором можно прописать следующим образом:

.bar-1 + .bar-2 {

         color: green;

}



5) Псевдоклассы - специальные атрибуты, которые используются, если надо обозначить стилевые правила для некоторого состоянияэлемента или для некоторых событий веб-страницы. Например, закрасить уже посещенную ссылку или ту ссылку, на которую навели курсор. Самые распространенные псевдоклассы это:

 

  • :hover - курсор над элементом
  • :visited - ссылка уже была открыта
  • :link - не посещенные ссылки
  • :active - нажатие на ссылку
  • :first-child - первый дочерний элемент данного


Псевдоклассы указываются после селектора. Например,

.foo .bar-2:hover {

         color: green;

}


Это правило означает, что при наведении курсора на текст абзацев p, которые размещены внутри классов bar-2, цвет текста будет изменен на зеленый. При выходе курсора за рамки элемента, цвет вернет свое исходное значение.

6) Селекторы атрибутов тега. Селектор может содержать условие равенства атрибута тега некоторому значению. Атрибут и условие указываются в квадратных скобках после определения селектора нужного элемента. Например, селектор простого текстового поля будет выглядеть так:

input[type=text] {

         width: 100%;

}