Билет 13 Виды селекторов: селектор групп, классовые селекторы, id-селекторы.

В CSS существует множество видов селекторов. Перечислим те из них, которые употребляются наиболее часто и хорошо поддерживаются браузерами.

Селектор по элементу: имя элемента;

Селектор по id: #значение_атрибута_id, имя_элемента#значение_атрибута_id;

Селектор по классу: .значение_атрибута_сlаss, имя_элемента.значение_атрибута_сlаss;

Контекстный селектор: селектор1 селектор2 ... селекторN;

Селектор по элементу…

В качестве селектора указывается имя элемента HTML, и он действует на все элементы в документе, имеющие это имя.

Селектор по id…

Если требуется особенным образом оформить один-единственный элемент во всем документе, можно присвоить этому элементу атрибут id.

Затем в таблице стилей нужно записать селектор, состоящий из символа решетки (#), непосредственно за которым следует значение атрибута id. Можно указать перед решеткой имя элемента HTML.

Если у нас только один документ HTML, нет никакой разницы, указывать ли в этом селекторе имя элемента. Всякое значение id может быть только у одного элемента в документе: например, если уже есть <h2 id="gotonew">, то в этом же файле HTML нельзя записать <p id="gotonew"> или даже еще один заголовок <h2 id="gotonew">.

Но если одна и та же таблица стилей применяется для оформления нескольких страниц, разница между селекторами #new и h2#new может проявиться: в одном документе атрибут id="gotonew" может быть у одного элемента, а в другом этот же атрибут — совершенно у другого.

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

Если требуется одинаково оформить несколько элементов, можно присвоить каждому из этих элементов атрибут class с одним и тем же значением, например: abstract.

Этот селектор действует на все элементы, имеющие атрибут class со значением abstract. В отличие от атрибута id, атрибут class может иметь одно и то же значение у нескольких элементов.

Селектор по классу также можно использовать вместе с именем элемента, например: h3.abstract.

В этом случае селектор будет действовать только на заголовки третьего уровня (h3), имеющие атрибут class со значением abstract, и не будет действовать, например, на абзацы текста (р) или элементы перечня (li), даже если в их открывающем тэге написано class="abstract".

Контекстный селектор…

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

Такой селектор будет действовать на все элементы li при условии, что эти элементы вложены в элемент ul. На элементы li, вложенные в ol, он не действует.

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

Если записать несколько селекторов через запятую и пробел, получится объединенный селектор, который будет действовать на все перечисленные элементы.