Виды CSS-селекторов

2008-01-31 / Рубрика: CSS

CSS позволяет создавать правила, которые будут задавать внешний вид элементов HTML-страницы. Каждое правило состоит из селектора и блока объявлений.

h2 {color:red;}

h2 в данном примере и есть селектор. Селекторы нужны для того, чтобы определить к каким частям HTML-документа нужно применять данное правило. В нашем примере я указал, что все заголовки второго уровня должны быть красного цвета.

Селекторы бывают пяти видов:

1. Селекторы элементов

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

table {background-color:red;}

2. Селекторы классов

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

.sampleclass1 { background-color: red;}

<h1 class="sampleclass1">Заголовок 1</h1> 
<p class="sampleclass1">Основной текст абзаца </p>

Заметьте, что перед именем селектора стоит точка. Её нужно ставить при формировании правила для селектора класса.

3. Селекторы идентификаторов

Селекторы идентификаторов работают почти так же как и селекторы классов, только они применяются к элементам через атрибут id. Здесь нужно заметить, что в HTML-документе не должно быть элементов с одинаковым идентификатором.

#sampleid1 {background-color:red;}

<div id="sampleid1">Образец блока…</div>

4. Селекторы атрибутов

Например, чтобы оформить в HTML-документе все элементы, у которых есть атрибут class:

h2[class] {color:red;}

<h2 class="kakoitoklass">Какой-то заголовок</h2> 
<p class="kakoitopara">Кусок текста</p>

В этом примере текст элементов h2 и p будет красного цвета.

Примечание: селекторы атрибутов не поддерживаются в Internet Explorer вплоть до версии 6.

5. Универсальный селектор

Этот селектор соответствует любому символу.

* { color: blue;}

Такое правило сделает синими все тексты во всех элементах документа HTML.

Продолжение следует.

Полезные материалы по теме

• CSS-селекторы
• Вес CSS селекторов
• CSS-селекторы
• CSS: советы и приёмы
• CSS Specificity: Things You Should Know