Селекторы
Селекторы
В CSS есть достаточно способов обратиться к нужным элементам.
В каждой новой спецификацией CSS добавлялось что-то новое, и теперь у нас есть много самых разных селекторов. Кроме того, различие в спецификациях можно использовать, например, чтобы спрятать стили от старых браузеров.
Спецификацию можно найти по ссылке: w3.org/TR/css3-selectors
Селекторы делятся на несколько видов:
- по типу (H1, TD, HR...);
- универсальный селектор — * — обозначает элемент любого типа;
- селекторы атрибутов ([data-name], [data-name$="hidden"]);
- селекторы по классу (.main, .header__nav);
- селекторы по ID (#form, #submit);
- псевдо-классы:
- динамические (:hover и т.д.);
- селектор цели (:target);
- селектор по языку (:lang(en));
- состояния элементов интерфейса (:enabled, :checked...);
- структурные псевдоклассы (:root, :nth-child);
- псевдокласс отрицания (:not(P)).
- псевдоэлементы (:before, :first-line);
- комбинаторы (DIV SPAN, P + H1);
Селекторы ниже сгруппированы по спецификациям. Это поможет нам понять какие из них работают везде (из CSS1), какие работают почти везде (из CSS2), а какие кое-где могут и не работать.
Селекторы из CSS1
Самые простые и хорошо всем знакомые:
- обращение к элементу по тегу (BODY, A, TABLE и т.д.);
- по ID (#main);
- по классу (.header-image);
- обращение к потомку через родителя (UL A, .sidebar .widget);
- состояния ссылок A:link, A:visited, A:hover;
- псевдоэлемент для первой строки текста — P::first-line;
- псевдоэлемент для первого символа в тексте — P::first-letter.
Селекторы из CSS2
В этой спецификации добавилось много интересного:
* — универсальный селектор. Например, * {margin: 0; } уберет отступы у всех элементов на странице.
E[foo] — элементы с заданым атрибутом.
Например:
P[data-content] {
border: 2px solid crimson;
}
Различные типы селекторов и их применение
Универсальный селектор:
Селектор * применяется ко всем элементам на странице.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Селекторы по типу элемента:
Селектор элемента применяет стили к конкретному типу HTML-элемента.
h1 {
color: #3498db;
}
p {
font-size: 16px;
}Классовые селекторы:
Селектор по классу позволяет стилизовать элементы с определенным классом.
.highlight {
background-color: #ffff00;
}
.rounded {
border-radius: 5px;
}
Идентификационные селекторы:
Селектор по идентификатору применяет стили к уникальному элементу на странице.
#header {
font-size: 24px;
}
#sidebar {
width: 250px;
}Дочерние селекторы:
Селектор дочерних элементов применяет стили к элементам, являющимся прямыми потомками указанного элемента.
article > p {
margin-bottom: 10px;
}
Псевдоклассы:
Псевдоклассы позволяют стилизовать элементы в определенных состояниях или условиях.
a:hover {
color: #e74c3c;
}
input:focus {
border: 2px solid #27ae60;
}
Атрибутные селекторы:
Селектор по атрибуту применяет стили к элементам с определенным атрибутом.
[type="text"] {
width: 300px;
}
HTML приемер:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors Lesson</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Пример селекторов в CSS</h1>
<p class="highlight">Этот абзац имеет класс "highlight".</p>
<div id="sidebar" class="rounded">Этот блок имеет идентификатор "sidebar" и класс "rounded".</div>
<article>
<p>Этот абзац внутри тега article.</p>
</article>
<a href="#" title="Наведите для изменения цвета">Наведите для изменения цвета</a>
<input type="text" placeholder="Введите текст">
</body>
</html>
Заключение
Селекторы в CSS предоставляют вам мощный инструмент для стилизации ваших веб-страниц. Используйте разнообразие селекторов, чтобы точно определить элементы, к которым вы хотите применить стили. Помните, что правильная организация кода с помощью селекторов делает ваш CSS более читаемым и управляемым.
Будьте первым