Что такое Селекторы CSS?

"Селекторы CSS". "Что такое Селекторы CSS?"

О селекторах :

1. Универсальный селектор (*)
2. Селекторы по тегу
3. Селекторы по классу
4. Селекторы по идентификатору
5. Селекторы атрибутов.
6. Групповой селектор.
7. Селектор gсевдоклассы
8. Комбинированные селекторы.
9. Селекторы отношений (комбинаторы)
10. Специфичность селекторов

1. Универсальный селектор "*"

Универсальный селектор в виде звездочки : "*".

Применяет стили ко всем элементам страницы. Часто используется для сброса отступов или установки базовых значений.

css

* {

margin: 0;

box-sizing: border-box;

}

2. Селекторы по тегу

Выбирают элементы определённого HTML-тега, например : <div>, <p>, <h1>.

html

<p>Абзац.</p>

css

p {

color: blue; /* Все параграфы будут синими */

}

3. Селекторы по классу

Выбирает элементы с атрибутом class, равным указанному значению. Один элемент может принадлежать нескольким классам.

html

<p class="highlight important">Текст</p>

css

.highlight {

background-color: yellow;

}

.important {

font-weight: bold;

}

4. Селекторы по идентификатору

Выбирают элементы с определённым идентификатором. Идентификатор указывается с символом `#` (решётка).

html

<div id="header">Текст</div>

css

#header {

font-size: 24px; /* Элемент с ID 'header' будет размером 24px */

}

5. Селекторы атрибутов.

Выбирают элементы на основе наличия или значения атрибута. Примеры:

[title] — элементы с атрибутом title;

[type="text"] — элементы с type="text";

[class^="form"] — элементы, у которых значение class начинается с form;

[href$=".pdf"] — ссылки, ведущие на PDF‑файлы.

css

[type="submit"] {

background-color: green;

color: white;

}

6. Групповой селектор.

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

html

<h1>Заголовок первого уровня.</h1>

<h2>Заголовок второго уровня.</h2>

<h3>Заголовок третьего уровня.</h3>

css

h1, h2, h3 {

color: darkblue;

margin-bottom: 10px;

}

7. Псевдоклассы

Указывают на определённое состояние элемента (например, при наведении курсора или клике). Примеры:

:hover — при наведении;

:active — в момент нажатия;

:visited — посещённая ссылка;

:first-child — первый дочерний элемент;

:nth-child(n) — n‑й дочерний элемент.

css

a:hover {

text-decoration: underline;

}

li:nth-child(odd) {

background-color: #f0f0f0;

}

8. Комбинированные селекторы.

Позволяют комбинировать различные типы селекторов.

html

<div class="note">Комбинированные селекторы</div>

css

div.note {

padding: 10px; /* Все div с классом 'note' получат внутренний отступ в 10px */

}

9. Селекторы отношений (комбинаторы)

Эти селекторы выбирают элементы на основе их расположения в DOM‑дереве:

Селектор потомков (A B) — выбирает все потомки элемента A (на любом уровне вложенности).

css

div p {

color: gray;

}

Дочерний селектор (A > B) — выбирает только прямых потомков элемента A.

css

ul > li {

list-style-type: square;

}

Соседний родственный селектор (A + B) — выбирает элемент B, который следует сразу за элементом A.

css

h1 + p {

margin-top: 0;

}

Общий родственный селектор (A ~ B) — выбирает все элементы B, которые следуют за A и имеют общего родителя.

css

p ~ p {

margin-top: 1em;

}

10. Специфичность селекторов

Когда к одному элементу применяются несколько правил, браузер определяет приоритет на основе специфичности. Уровни специфичности (по убыванию):

Стили в атрибуте style (высший приоритет).

Селекторы по идентификатору (#id).

Селекторы по классу, атрибуту и псевдоклассы (.class, [attr], :hover).

Селекторы по тегу и псевдоэлементы (p, ::before).

Пример: селектор #main .highlight имеет более высокую специфичность, чем .highlight, поэтому его стили перекроют стили второго.

Всего комментариев : Comments+ 2.0

+ =