CSS id и class

В предыдущей главе мы изучили селекторы. Теперь поговорим о селекторах id и class, которые часто используются для стилизации элементов веб-страницы.

CSS class selector

Селектор CSS id

Селектор ID является уникальным идентификатором элемента HTML, к которому необходимо применить определённый стиль. Он используется только тогда, когда один конкретный элемент HTML на веб-странице должен иметь уникальный стиль.

В внутренних и внешних таблицах стилей для селектора id используется символ решётки (#).

Пример селектора ID:

Селектор CSS ID для элемента HTML

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #blue {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <p>The first paragraph.</p>
    <p id="blue">The second paragraph.</p>
    <p>The third paragraph.</p>
  </body>
</html>

Try it Yourself »

Как видите, мы назначили blue в качестве селектора id для второго абзаца (id="blue"), а его стиль объявили с помощью свойства color — #blue {color: #1c87c9;} в секции <head>. Это означает, что элемент HTML с селектором id blue будет отображён цветом #1c87c9.

Проверьте этот код в нашем онлайн-редакторе HTML, чтобы убедиться, что цвет второго абзаца равен #1c87c9.

Селектор CSS class

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

В внутренних и внешних таблицах стилей для селектора class используется точка (.).

Пример селектора class:

Пример селектора CSS class

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .blue {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2 class="blue">This is some heading.</h2>
    <p>The second paragraph.</p>
    <p class="blue">The third paragraph.</p>
  </body>
</html>

Try it Yourself »

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

Как видите, мы назначили blue в качестве селектора class (class="blue"), а его стиль объявили с помощью свойства color — .blue {color: #1c87c9;} в секции <head>. Это означает, что элементы с селектором class blue будут отображены цветом #1c87c9.

В нашем примере заголовок и третий абзац имеют цвет #1c87c9. Проверьте это в нашем онлайн-редакторе HTML.

Разница между ID и class

Разница между ID и class заключается в том, что первый является уникальным, а второй — нет. Это означает, что каждый элемент может иметь только один ID, и на каждой странице может быть только один элемент с этим ID. При использовании одного и того же ID на нескольких элементах код не пройдёт валидацию. Однако, поскольку классы не являются уникальными, один и тот же class можно использовать для нескольких элементов, и наоборот, к одному элементу можно применить несколько классов.

Практика

Каково основное различие между CSS ID и class?

CSS ID уникален и должен использоваться только один раз на странице, тогда как class можно использовать многократно.CSS ID и class можно использовать многократно на одной странице.Class применяется к элементам HTML, а ID — к элементам CSS.CSS ID определяется с помощью символа #, а class — с помощью символа .CSS ID применяется к элементам CSS, а class — к элементам HTML.

CSS id и class ​

Селектор CSS id ​

Пример селектора ID: ​

Селектор CSS class ​

Пример селектора class: ​

Разница между ID и class ​