# Классы элементов на CSS

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

Чтобы отнести тег какому-нибудь классу, нужно этому тегу написать атрибут `class`, а в нем - придуманное вами название класса, состоящее из букв, цифр, символов подчеркивания и дефиса.

Давайте посмотрим на примере. Сделаем абзацы с двумя типами классов - `eee` и `zzz`:

`<p class="eee"> абзац с классом eee </p> <p class="eee"> абзац с классом eee </p> <p class="zzz"> абзац с классом zzz </p> <p class="zzz"> абзац с классом zzz </p>`

Давайте теперь обратимся в CSS к абзацам с различными классами и зададим им какие-нибудь стили. К примеру, покрасим абзацы с классом `zzz` в красный цвет, а абзацы с классом `eee` - в зеленый.

Для этого в CSS файле нужно обратиться к нашим классам. Обращение имеет следующий синтаксис: сначала идет символ точка, а затем придуманное нами имя класса. То есть для обращения к классу `eee` нужно написать `.eee`, а для класса `zzz` - написать `.zzz`.

Итак, сделаем описанное. Добавим к нашему HTML еще и CSS стили для введенных нами классов:

`.eee { color: green; } .zzz { color: red; }`

Если запустить наш код, то в результате получится следующее:

Дан следующий код:

`<ul> <li class="odd">пункт</li> <li class="eve">пункт</li> <li class="odd">пункт</li> <li class="eve">пункт</li> <li class="odd">пункт</li> <li class="eve">пункт</li> </ul>`

Покрасьте в красный цвет элементы с классом `odd` и в зеленый цвет - элементы с классом `eve`.

Дан следующий код:

`<h2 class="eee">заголовок</h2> <p class="eee"> абзац </p> <p class="eee"> абзац </p> <p> абзац без класса </p> <ul class="eee"> <li>пункт</li> <li>пункт</li> <li>пункт</li> <li>пункт</li> <li>пункт</li> </ul>`

Покрасьте в красный цвет все элементы с классом `eee`.

Объясните, почему в предыдущей задаче в красный цвет красятся теги `li`, хотя класс, задающий цвет, назначен тегу `ul`.

←→
↑