Селекторы CSS

Объявление стилей:
- Внутри тега <style> в <head>.
- Во внешнем .css файле, подключаемом через тег <link> в <head>.
  - Шаблон подключения: <link rel="stylesheet" href="название.css">

Основной синтаксис CSS правила:

селектор {
    свойство1: значение1;
    свойство2: значение2;
    /* ... */
}

Типы селекторов:
- По тегу: h1 { ... }
- По классу: .имя_класса { ... }
- По идентификатору: #имя_идентификатора { ... }
- Универсальный селектор: * { ... } (выбирает все элементы)
- Группировка селекторов (через запятую):
```
h1, h2, p {
  text-align: center;
  color: red;
}
```
Комбинаторы селекторов:
- Селектор потомков (пробел): Выбирает все элементы <p>, которые находятся внутри <div> (на любом уровне вложенности).
```
div p {
    background-color: yellow;
}
```
- Селектор дочерних элементов (>): Выбирает все элементы <p>, которые являются непосредственными дочерними элементами <div>.
```
div > p {
   background-color: yellow;
}
```
- Селектор следующего соседнего элемента (+): Выбирает первый элемент <p>, который находится непосредственно после <div> на том же уровне иерархии (имеет общего родителя).
```
div + p {
   background-color: yellow;
}
```
- Селектор всех последующих соседних элементов (~): Выбирает все элементы <p>, которые находятся после <div> на том же уровне иерархии (имеют общего родителя).
```
div ~ p {
   background-color: yellow;
}
```

〰〰〰 𓆝 𓆟 𓆞 𓆝 𓆟 𓆝 𓆟 𓆞 〰〰〰

ฅ≽(•⩊ •マ≼

Проводник

Селекторы CSS

Вид графа

Обратные ссылки