Типы селекторов Css. Урок №2

Всего существует семь типов селекторов. Это:

  • Селектор тэга
  • Селектор класса
  • Селектор id
  • Универсальный селектор
  • Селектор атрибута
  • Селектор псевдокласса
  • Селектор псевдоэлемента
Селектор тэга

Самый простой – он записывается, как название тэга без угловых скобок. Например, div.

div.JPG

Данной записью мы говорим, что все содержимое всех тэгов <div> нашего документа или документов будет написано шрифтом красного цвета.

Селектор класса

Если нам нужно какому-то одному параграфу задать какой-то, допустим, фон. То мы можем использовать селектор класса. Но перед тем, как писать правила, нам нужно в тэге <p> данного параграфа написать атрибут class, в значении которого можно писать все, что угодно (помимо латинских букв, можно использовать знак дефиса и цифры), но нужно дать название нашему селектору так, чтобы потом было самому понятно, к чему он относится. Затем в таблице стилей, либо в тэге <head> нашего документа между <style> </style> мы пишем точку, а после нее значение атрибута class, и в фигурных скобках задаем правила для данного параграфа.
Если в документе: <p class="pravilo">, то
в таблице стилей:

.pravilo {

}

При этом, разные элементы документа могут иметь одни и те же значения атрибута class . То есть мы можем несколько тэгов отнести к одному и тому же классу и их содержание будет каким-то образом оформляться. Это нам позволяет создать универсальное правило, например, для выделения важных частей текста, а в документе просто добавлять атрибут class в тэги.

Селектор id

Первое, о чем стоит сказать – это то, что значение атрибута id в HTML – уникальное. В отличие от class, мы не можем его приписать любому тэгу, а только одному! В таблице стилей он изображается в виде знака решетки, а в документе нужно к тэгу добавить атрибут id с каким-то значением.
Если в документе: <p id="pravilo">, то
в таблице стилей:
#pravilo{

}

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

Универсальный селектор записывается, как "звездочка". Если в таблице задать правила для этого селектора, то это правило будет применяться к содержимому всех тэгов.
*{

}

Все эти четыре типа селекторов работают на сегодняшний день во всех браузерах. Но есть селекторы, которые работают не везде, например, в Internet Explorer версий 7,6 и ниже.

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

Записываются они так:

[title] {

}

Этой записью мы говорим, что все, что заключено в тэги, имеющие атрибут title, будет иметь такой вид, который прописан в фигурных скобках. Причем абсолютно не важно, имеет ли этот атрибут какое-нибудь значение. Он может быть пустым и записан так:

<p title="">

Все равно к тэгу <p> будут применены правила, которые записаны в селекторе [title].
Если нужно, чтобы правила были применены к атрибуту (например, к title) с определенным значением, тогда следует записать так:

[title="значение"] {

}

Если нужно, чтобы правила были применены к содержимому определенного тэга с каким-то атрибутом (например, с title), имеющим определенное значение, то надо записать так:

p [title="значение"] {

}

Если мы хотим, чтобы правила были применены к содержимому тэгов с атрибутом title (или каким-то другим), в значении которого содержится какое-то слово целиком, то нужно записать это так:

[title~="слово"] {

}

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

[title*="часть слова"] {

}

Если мы хотим, чтобы правила были применены к содержимому тэга, имеющего атрибут title (или другой), значение которого начинается с каких-то символов (букв). Тогда нужно записать так:

[title^="символ"] {

}

Если мы хотим, чтобы правила были применены к содержимому тэга, имеющего атрибут title (или другой), значение которого заканчивается какими-то символами (буквами). Тогда нужно записать так:

[title$="c"] {

}

Селекторы атрибутов – это очень мощный инструмент, который, к сожалению сейчас не так широко используется, "благодаря" Microsoft и его IE 6,7 и ниже. Но, в скором времени, когда отомрет окончательно IE версиий 6,7 и ниже, данные селекторы прочно войдут в CSS и будут широко применяться.

Селекторы псевдоклассов

Селекторы псевдоклассов отвечают за вид содержимого элементов, когда оно находится в каком-то состоянии.
Это селекторы :link, :visited, :active, :hover, :focus и :first-child. Первые два относятся только к ссылкам, т.е. к содержимому тэгов <a>, а остальные могут быть применены к любому тэгу, который имеет содержание.

:link оформляет нетронутые пользователем ссылки.

a:link {color:blue}

Этой записью мы говорим, что все нетронутые пользователем ссылки на документе или документах будут окрашены в синий цвет.

:visited - оформляет ссылки, по которым пользователь уже проходил.

a:visited {color:red;}

Этой записью мы говорим, что все ссылки, по которым пользователь уже кликал (проходил), будут окрашены в красный цвет.

:active оформляет активный элемент ( в момент клика мышкой). Может применяться к любому элементу, но в IE 6 работает только для гиперссылок.

p:active {color:red}

Этой записью мы говорим, что все параграфы в момент клика по ним мышкой будут окрашены в красный цвет (буквы).

:hover – оформляет элемент, когда на него пользователь наводит мышкой. Также может применяться к любым элементам, но в IE 6 работает только для гиперссылок.

:focus – оформляет формы и гиперссылки при нажатии на клавишу "Tab". Не работает в 6 и 7 IE

p:focus {color:red;}

При нажатии на Tab текст в элементах будет красного цвета

:first-child – задает правила для первых "детей" всех элементов. В IE 6 не работает.
Подробнее о том, что такое дети и родители мы поговорим в другой статье, а сейчас просто скажу то, что тэг, который находится внутри другого тэга, является его "ребенком". Например, у нас есть код:

code4.JPG

При просмотре в браузере содержимое первого тэга <p> окрасится в красный цвет.

Селекторы псевдоэлементов

Селекторов псевдоэлементов всего два. Это :first-line и :first-letter
:first-line – первая линия (строка)
:first-letter – первый символ
Если записать:

p:first-line {color:blue}, то

во всех параграфах документа или документов первые строки окрасятся в синий цвет.

Если записать:

p:first-letter {color:blue}, то

во всех параграфах первые буквы окрасятся в синий цвет.
Оба этих селектора не работают в браузере IE 6.

Вот вроде бы и все о селекторах, если что-то упустил или где-то допустил ошибку - пишите в комментариях к материалу.

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