Как применить css к определенному элементу

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

1. Классы:

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

HTML разметка:

<div class="my-class">Какой-то текст</div>

CSS код:

.my-class {
  color: red;
  font-size: 18px;
}

2. Идентификаторы:

Идентификатор это атрибут «id» определенного элемента. Он должен быть уникальным на странице. Для определения CSS стилей, относящихся к определенному элементу по идентификатору, в CSS коде необходимо использовать знак ‘#’:

HTML разметка:

<div id="my-id">Какой-то текст</div>

CSS код:

#my-id {
  color: blue;
  font-size: 20px;
}

3. Псевдоклассы:

Псевдоклассы могут быть использованы для изменения внешнего вида элементов в зависимости от их состояния. В CSS коде вы можете использовать селекторы псевдоклассов, такие как :hover, :active, :focus и :visited и многие другие. Например, для изменения текстового цвета при наведении на связь, можно использовать псевдокласс :hover:

CSS код:

a:hover {
  color: green;
}

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

Например, чтобы определенный стиль применялся только к элементу «h1» внутри определенной секции с классом «my-section,» необходимо написать следующий код:

.my-section h1 {
  color: red;
  font-size: 24px;
}

В данном случае все заголовки h1, которые находятся внутри элемента с классом «my-section», будут иметь красный цвет и размер шрифта 24 пикселя.