Урок 8: Типы селекторов в css

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

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

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

• Селектор по id;

• Контекcтный селектор;

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

До этого момента, мы с вами работали именно с этим селектором.Т.е. в качестве селектора использовалось непосредственно имя 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><pclass="green"> Этот параграф зеленый, т.к к нему применили класс </p><pclass ="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- часть:

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

css - часть:

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

• Смотреть пример

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

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