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

Селекторы по идентификатору

В предыдущем уроке в качестве селекторов использовались тэги: body, h1, h2. Но что делать, если в нашей html-странице есть несколько одинаковых элементов (например, параграфов), и мы хотим, чтобы текст всех параграфов был черным, а одного из них - синим цветом. Тогда нам понадобится указать уникальный идентификатор для этого параграфа и создать для него стиль.

В HTML идентификатор элемента задается при помощи параметра «id», в качестве значения которого указывается уникальное имя. Например:

<p id=”cvet”>Текст в этом абзаце будет синего цвета</p> - html-код

p #cvet{color: blue} – css-код

Имена идентификаторам можно давать любые, кроме зарезервированных слов (к ним относятся имена тегов и параметров элементов HTML и CSS), например, нельзя идентификатору дать имя body.

Если в css-документе написать #cvet{color:blue}, то данный идентификатор можно применять и к другим тэгам в html-коде.

<p id=”cvet”>Текст в этом абзаце будет синего цвета</p> - html-код

<h1 id=”cvet”>Текст в этом заголовке первого уровня будет синего цвета</h1> - html-код

<h3 id=”cvet”>Текст в этом заголовке третьего уровня будет синего цвета</h3> - html-код

Селекторы по классу

Аналогичны по работе и записи с селекторами по идентификатору. Отличаются записью, в документе CSS вместо символа «#» ставится «.», а в документе HTML вместо «id», стоит записывать «class».

Пример записи селектора класса в файле CSS:

.special {

color:#FF0000;

font-family:"Monotype Corsiva";

}

Пример записи селектора класса в файле HTML:

<div class=”special”>…</div> - не надо указывать точку перед именем класса в HTML-коде (в атрибуте class). Она требуется только в имени селектора таблицы стилей.

Правила, которые необходимо иметь в виду при именовании селекторов.

• Все имена классов и идентификаторов должны начинаться с точки. С ее помощью браузеры находят классы и идентификаторы в каскадной таблице стилей.

· При именовании классов и идентификаторов разрешается использование только латинских букв, цифр, дефисов и знаков подчеркивания.

· Имя после точки или решётки всегда должно начинаться с латинской буквы. Например, .9lives — неправильное имя класса, а .crazy8 — правильное. Можно называть классы, скажем, именами .copy-right и .banner_image, но не .-bad или ._as_bad.

• Имена классов и идентификаторов чувствительны к регистру. Например, .SIDEBAR и .sidebar рассматриваются языком CSS как различные классы.

Групповые селекторы

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

h1, h2, h3, h4, h5, h6 { color: #F1CD33; }

Здесь приведены только селекторы тегов, но можно использовать любые типы селекторов (и их сочетания). Например, стиль группового селектора, который определяет одинаковый цвет шрифта для элементов h1, p и любых других, принадлежащих классу .copyright, а также для элемента с идентификатором #banner, выглядит так: h1, p, .copyright, #banner { color: #F1CD33; }.

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

Для задания каких-либо свойств ВСЕМ элементам страницы или сайта можно использовать универсальный селектор «*».

Например, чтобы все элементы отображались полужирным шрифтом достаточно в файле CSS прописать:

*{font-weight: bold;}

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

Например, #nomber1 * выбирает все элементы внутри элемента, имеющего атрибут class со значением .nomber1.