CSS селекторы ID и CLASS

В этой главе:

  • Селектор id

  • Селектор class

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

Селектор id

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

Для использования селектора id, нужно создать идентификатор(id), придумав ему уникальное название, и прописать его в атрибуте id элемента, к которому будет применяться стиль. В описании стиля селектор id начинается с символа # сразу после которого идет название идентификатора.

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

Ниже представлен пример того, как работает селектор id

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #para1 {
        text-align: center;
        color: red;
      }
    </style>
  </head>
 
  <body>
    <p id="para1">Добро пожаловать!</p>
    <p>К этому абзацу не будет применен стиль.</p>
  </body>
</html>

Попробовать »

Примечание: не давайте идентификаторам имена, начинающиеся с цифр, они не будут работать в браузере Mozilla Firefox.

Селектор class

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

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

Правила для имен классов:

  • все названия селекторов классов должны начинаться с точки, с ее помощью браузеры находят селектор класса в таблице стилей CSS

  • в имени класса разрешается использовать только буквы, числа, дефис и знак подчеркивания

  • имя класса после точки всегда должно начинаться с буквы

  • имена классов чувствительны к регистру, например .Menu и .menu будут рассматриваться в CSS, как два разных класса

Описание стиля для классов ничем не отличается от описания стилей к другим селекторам, после имени класса идет блок объявлений, содержащий все необходимые свойства:

1
2
3
4
.menu {
  color: #33CCFF;
  font-family: sans-serif;
}

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

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.center { text-align: center; }
    </style>
  </head>
 
  <body>
    <h1 class="center">Стиль не будет применен.</h1>
    <p class="center">Абзац будет выровнен по центру.</p>
  </body>
</html>

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