Специализация селекторов.

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

↓- селекторы элементов определеныдля всех экземпляров определенного элемента текста HTML:

Элемент (имя тега без < >) {имя параметра: значение; имя параметра: значение; …}

↓Пример: h1 {font–family: Arial; front – size: 48 pt; color: red}

↓- селекторы классов определены для всех экземпляров элемента HTML принадлежащих к определенному классу

элемент.имя_класса {параметр: значение; … }

или

.имя_класса {параметр: значение; … }

↓Пример: p.question {color: green} (абзац.вопрос)

.question {color: green}

при использовании следует указывать соответствующий класс в документе HTML

<p class = “question”> … </p>

↓- селекторы идентификаторов используютсядля отдельных экземпляров, определенных с помощью атрибута id. Каждый элемент может быть обозначен собственным идентификатором. В одном документе все идентификаторы должны быть различны.

элемент(может не быть)#имя индивидуального стиля {параметр: значение; …}

↓Пример. В файле с таблицей стиля селектор идентификатора может быть описан так: p#question{color: green; text-align: center}

↓или так:

#question{color: green; text-align: center}

В файле с HTML-страничкой описанный стиль будет использоваться так:

<p id=”question”> … </p>

- селекторы псевдоклассов используются для описания стиля гиперссылок <a>

a: link {color: blue} - неиспользованная ссылка

a: visited {color: green} - использованная ссылка

a: active {color: red} - активная ссылка

a: hover {color: red; font-wight: bold} – при наведении курсора на ссылку

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

p, li, h1 { font–family: Arial }

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

#menu p { font–family: Arial } (стиль будет применён к абзацу, вложенному в элемент со значением идентификатора menu).

p blockquote { font–family: Arial } (стиль будет применён к цитате, которая является частью абзаца)

blockquote p { font–family: Arial } (стиль будет применён к абзацу, являющемуся частью цитаты)

#menu p.term { font–family: Arial } (стиль будет применён к абзацу, который относится к классу term и находится в разделе со значением идентификатора menu).