ВЕБУЧЕБНИКИ

Селектор служит для однозначного определения элемента в html документе, к которому необходимо применить тот или иной стиль CSS .

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

В качестве селектора использовалось непосредственно имя html элемента , к которому необходимо применить данный стиль. Т.е. написав класс например для параграфа (Р) , все параграфы на странице приобретали стиль данного класса.

Пример:

P {

font-family: arial, verdana, sans-serif;

font-size: 12px

}

Однако, иногда необходимо сделать первый параграф в одном стиле, второй в другом, третий в третьем и.т.д. Тут приходит на помощь селектор по классу.

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

Как создать универсальный класс в CSS . Сделать это очень просто: сначала ставим точку, затем сразу, без пробела, пишем имя класса, затем в фигурных скобках стиль.

Пример:

.green {

font-family: arial, verdana, sans-serif;

font-size: 12px; color:green;

}

Как применить данный стиль?

Применение данного стиля к определенному параграфу в документе будет выглядеть в html следующим образом:

Пример:

<P class ="green"> ... текст параграфа ... </P>

Как видите используется атрибут class со значением названия стиля. Вот еще пример.

Пример:

html:

<p>Это обычный параграф , для него используется селектор по элементу </p>

<p class="green"> Этот параграф зеленый, т.к к нему применили класс </p>

<p class ="big_red" >А этот параграф большего шрифта и красный </p>

<p>Этот параграф снова обычный, по классу селектора элемента </p>

css:

p {

font-family:arial,verdana,sans-serif;

font-size:18px;

}

.green {color:green;}

.big_red{

font-size:28px;

color:red;

}

нажмите чтобы увидеть результат

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

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

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

Пример:

P.green {color:green;}

Теперь класс green не будет действовать ни на что другое, кроме элемента P.

Селектор по id

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

Пример:

html- часть:

<Н1 id="firstheader"> Первый заголовок на странице </Н1>

css - часть:

H1#firstheader { color: red; font-weight: bold; text-align: center }

Как видите в html-части вместо атрибута class используется атрибут id , а в css - вместо точки употребляется знак #.

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

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

Это очень полезная вещь. Допустим у нас есть страничка с таблицами и параграфами текста, причем и в таблице, и в параграфах встречаются выделенные жирным шрифтом (strong) слова. И вот, нам резко понадобилось сделать так, чтобы слова, в параграфе, которые выделены жирным стали зеленого цвета. Так вот:

Пример:

p strong {color:green }

нажмите чтобы увидеть результат

Т.е. в начале P затем пробел, затем STRONG а уже потом стиль. Читается эта строчка примерно так: если внутри элемента P имеется элемент STRONG то элементу strong присвоить стиль зеленого цвета.

Вложенность может быть любого уровня. Вот еще пример: "Если вдруг внутри ячейки таблицы (td), встретится параграф (P), внутри которого будет слово выделенное жирным (STRONG) то пусть это слово станет красным! "

td p strong {color:red;}