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


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

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

P {
font-family: arial, verdana, sans-serif;
font-size: 15px
}

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

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

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

.red {
font-family: arial, verdana, sans-serif;
font-size: 15px; color:green;
}

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

Если мы хотим применить этот стиль к данному параграфу в документе, то в html это будет выглядеть именно так:

<P class ="red"> ... текст параграфа ... </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:28px;
}
.red {color:green;}
.big_red{
font-size:48px;
color:red;
}

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

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

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

P.green {color:green;}

Теперь класс green будет относиться только к элементу P.

Селектор по id

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

html- часть:

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

css – часть:

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

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

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

Весьма полезная вещь, советую обратить на неё своё внимание. Представим, что у нас есть страничка с таблицами и параграфами текста, причем и в таблице, и в параграфах имеются слова, которые выделяются жирным шрифтом (strong) слова. И вдруг представьте, что срочно жирные слова нужно сделать зеленого цвета. Как поступать?

p strong {color:red }

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

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

td p strong {color:blue;}

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