CSS Селекторы

CSS (Cascading Style Sheets) предоставляет множество селекторов для выбора HTML-элементов, к которым нужно применить стили.

CSS-селекторы — это шаблоны, используемые для выбора элементов, которые вы хотите стилизовать.

Столбец "CSS" в таблице ниже указывает версию CSS, в которой определено свойство. CSS1, CSS2 и CSS3 — это разные версии Cascading Style Sheets, каждая из которых добавляет новые функции и возможности для улучшения управления и оформления стилей веб-страниц.

Распространённые селекторы CSS

Ниже приведены некоторые распространённые селекторы CSS:

Селектор элемента:Выбирает HTML-элементы по имени элемента.

Следующий код,pСелектор выберет все<p>Элемент:

p {
  color: blue;
}

Селектор класса:Выбирает HTML-элементы с определённым классом по имени класса.

Селекторы класса начинаются с.начиная с, за которым следует имя класса.

Следующий код,.highlightСелектор выберет все элементы с классом"highlight"элементы.

.highlight {
  background-color: yellow;
}

Селектор ID:Выбирает HTML-элементы по уникальному идентификатору элемента (ID).

Селекторы ID начинаются с#начиная с, за которым следует имя ID.

Следующий код,#exampleСелектор выберет элементы с ID"example"элементы.

#example {
  width: 200px;
}

Селектор атрибута:Выбирает HTML-элементы по атрибутам элемента. Селекторы атрибутов могут выбирать на основе имён атрибутов и значений атрибутов.

Следующий код,input[type="text"]Селектор выберет всеtypeСвойство имеет значение"text"элемент <input>.

input[type="text"] {
  border: 1px solid gray;
}

Селектор потомков:Выбирает HTML-элементы, задавая отношение потомка между элементами.

Селектор потомков использует пробелы для разделения имён элементов.

В следующем коде селектор div p выберет все элементы <p> внутри элементов <div>.

div p {
  font-weight: bold;
}

Дополнительные селекторы см. в следующей таблице: