Загрузка...
Полное руководство по селекторам CSS
Это полное руководство по селекторам CSS создано для разработчиков, чтобы обеспечить быстрый и надежный доступ ко всем доступным селекторам в современном CSS. Руководство охватывает базовые селекторы, комбинаторы, атрибутные селекторы, псевдоклассы (структурные, действия пользователя, состояния форм, ссылки, логические), псевдоэлементы, расширенные селекторы и медиа-запросы. Оно содержит практические примеры с указанием поддержки браузеров, позволяя эффективно применять стили, избегать конфликтов, оптимизировать код и создавать современные адаптивные интерфейсы. Руководство удобно для быстрой справки во время разработки, проектирования сложных макетов и внедрения новых возможностей CSS.
📊 Basic Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| * | * | Универсальный селектор – выбирает все элементы | * { margin: 0; } | Все браузеры |
| element | tagname | Селектор по типу – выбирает все элементы указанного типа | p { color: blue; } | Все браузеры |
| .class | .classname | Селектор класса – выбирает элементы с указанным классом | .highlight { background: yellow; } | Все браузеры |
| \#id | #idname | Селектор ID – выбирает элемент с указанным ID | #header { width: 100%; } | Все браузеры |
📊 Combinator Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| descendant | A B | Селектор потомка – выбирает B внутри A | div p { margin: 10px; } | Все браузеры |
| child | A > B | Селектор дочернего элемента – выбирает прямого потомка B у A | ul > li { list-style: none; } | IE7+ |
| adjacent sibling | A + B | Селектор смежного брата – выбирает B сразу после A | h1 + p { font-weight: bold; } | IE7+ |
| general sibling | A \~ B | Селектор общих братьев – выбирает все B после A | h1 \~ p { color: gray; } | IE7+ |
📊 Attribute Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| \[attribute] | \[attr] | Выбирает элементы с указанным атрибутом | \[disabled] { opacity: 0.5; } | IE7+ |
| \[attribute=value] | \[attr=val] | Выбирает элементы с атрибутом, равным значению | \[type="text"] { border: 1px solid; } | IE7+ |
| \[attribute\~=value] | \[attr\~=val] | Выбирает элементы, атрибут которых содержит слово | \[class\~="button"] { cursor: pointer; } | IE7+ |
| \[attribute^=value] | \[attr^=val] | Выбирает элементы, атрибут которых начинается с значения | \[href^="https"] { color: green; } | IE7+ |
| \[attribute\$=value] | \[attr\$=val] | Выбирает элементы, атрибут которых заканчивается на значение | \[src\$=".jpg"] { border: 2px solid; } | IE7+ |
| \[attribute*=value] | \[attr*=val] | Выбирает элементы, атрибут которых содержит значение | \[title*="important"] { font-weight: bold; } | IE7+ |
| \[attribute="value" i] | \[attr="val" i] | Селектор атрибута без учета регистра | \[type="EMAIL" i] { text-transform: lowercase; } | Современные браузеры |
📊 Pseudo-class Selectors - Structural
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :first-child | :first-child | Выбирает первый дочерний элемент | p:first-child { margin-top: 0; } | IE7+ |
| :last-child | :last-child | Выбирает последний дочерний элемент | p:last-child { margin-bottom: 0; } | IE9+ |
| :nth-child(n) | :nth-child(n) | Выбирает n-ый дочерний элемент | tr:nth-child(2n) { background: #f0f0f0; } | IE9+ |
| :nth-last-child(n) | :nth-last-child(n) | Выбирает n-ый дочерний элемент с конца | li:nth-last-child(2) { color: red; } | IE9+ |
| :nth-of-type(n) | :nth-of-type(n) | Выбирает n-ый элемент своего типа | h2:nth-of-type(odd) { color: blue; } | IE9+ |
| :nth-last-of-type(n) | :nth-last-of-type(n) | Выбирает n-ый элемент типа с конца | p:nth-last-of-type(1) { font-weight: bold; } | IE9+ |
| :first-of-type | :first-of-type | Выбирает первый элемент типа | img:first-of-type { float: left; } | IE9+ |
| :last-of-type | :last-of-type | Выбирает последний элемент типа | p:last-of-type { margin-bottom: 20px; } | IE9+ |
| :only-child | :only-child | Выбирает элемент, который единственный среди детей | p:only-child { text-align: center; } | IE9+ |
| :only-of-type | :only-of-type | Выбирает элемент, который единственный среди своего типа | img:only-of-type { display: block; } | IE9+ |
| :empty | :empty | Выбирает элементы без детей | div:empty { display: none; } | IE9+ |
📊 Pseudo-class Selectors - User Action
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :hover | :hover | Выбирает элемент при наведении мыши | a:hover { color: red; } | Все браузеры |
| :active | :active | Выбирает элемент при клике | button:active { transform: scale(0.95); } | Все браузеры |
| :focus | :focus | Выбирает элемент с фокусом | input:focus { outline: 2px solid blue; } | Все браузеры |
| :focus-visible | :focus-visible | Выбирает элемент при видимом фокусе | button:focus-visible { outline: 2px solid; } | Современные браузеры |
| :focus-within | :focus-within | Выбирает элемент, содержащий элемент с фокусом | form:focus-within { border: 1px solid blue; } | Современные браузеры |
📊 Pseudo-class Selectors - Form States
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :enabled | :enabled | Выбирает активные элементы формы | input:enabled { background: white; } | IE9+ |
| :disabled | :disabled | Выбирает неактивные элементы формы | input:disabled { background: #f5f5f5; } | IE9+ |
| :checked | :checked | Выбирает отмеченные чекбоксы/радио | input:checked + label { font-weight: bold; } | IE9+ |
| :indeterminate | :indeterminate | Выбирает неопределенные чекбоксы | input:indeterminate { opacity: 0.5; } | IE9+ |
| :valid | :valid | Выбирает валидные элементы формы | input:valid { border-color: green; } | IE10+ |
| :invalid | :invalid | Выбирает невалидные элементы формы | input:invalid { border-color: red; } | IE10+ |
| :required | :required | Выбирает обязательные поля | input:required { border-left: 3px solid red; } | IE10+ |
| :optional | :optional | Выбирает необязательные поля | input:optional { border-left: 3px solid gray; } | IE10+ |
| :read-only | :read-only | Выбирает элементы только для чтения | input:read-only { background: #f9f9f9; } | Современные браузеры |
| :read-write | :read-write | Выбирает редактируемые элементы | input:read-write { background: white; } | Современные браузеры |
| :placeholder-shown | :placeholder-shown | Выбирает элементы с отображаемым плейсхолдером | input:placeholder-shown { font-style: italic; } | Современные браузеры |
| :in-range | :in-range | Выбирает элементы с допустимым диапазоном значения | input:in-range { border-color: green; } | Современные браузеры |
| :out-of-range | :out-of-range | Выбирает элементы с недопустимым диапазоном значения | input:out-of-range { border-color: red; } | Современные браузеры |
📊 Pseudo-class Selectors - Link States
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :link | :link | Выбирает непосещенные ссылки | a:link { color: blue; } | Все браузеры |
| :visited | :visited | Выбирает посещенные ссылки | a:visited { color: purple; } | Все браузеры |
| :any-link | :any-link | Выбирает все ссылки | a:any-link { text-decoration: underline; } | Современные браузеры |
| :target | :target | Выбирает элемент, являющийся целью URL | :target { background: yellow; } | IE9+ |
📊 Pseudo-class Selectors - Logical
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :not(selector) | :not(sel) | Выбирает элементы, не соответствующие селектору | p:not(.special) { color: gray; } | IE9+ |
| :is(selector) | :is(sel1, sel2) | Выбирает элементы, соответствующие любому селектору | :is(h1, h2, h3) { margin-top: 0; } | Современные браузеры |
| :where(selector) | :where(sel1, sel2) | Как :is, но с нулевой специфичностью | :where(h1, h2) { color: blue; } | Современные браузеры |
| :has(selector) | :has(sel) | Выбирает элементы, содержащие другой селектор | div:has(img) { border: 1px solid; } | Современные браузеры |
📊 Pseudo-element Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| ::before | ::before | Вставляет контент перед элементом | p::before { content: "→ "; } | IE9+ (:before IE8+) |
| ::after | ::after | Вставляет контент после элемента | p::after { content: " ←"; } | IE9+ (:after IE8+) |
| ::first-line | ::first-line | Выбирает первую строку текста | p::first-line { font-weight: bold; } | |
| ::first-letter | ::first-letter | Выбирает первую букву текста | p::first-letter { font-size: 2em; } | IE9+ (:first-letter IE6+) |
| ::selection | ::selection | Выбирает выделенный текст | ::selection { background: yellow; } | IE9+ |
| ::placeholder | ::placeholder | Выбирает текст плейсхолдера | input::placeholder { color: #999; } | Современные браузеры |
| ::backdrop | ::backdrop | Выбирает фон полноэкранного элемента | dialog::backdrop { background: rgba(0,0,0,0.5); } | Современные браузеры |
| ::marker | ::marker | Выбирает маркеры списка | li::marker { color: red; } | Современные браузеры |
📊 Advanced Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :root | :root | Выбирает корневой элемент документа | :root { --main-color: blue; } | IE9+ |
| :scope | :scope | Выбирает элемент области видимости | :scope > p { margin: 0; } | Современные браузеры |
| :defined | :defined | Выбирает определенные кастомные элементы | custom-element:defined { opacity: 1; } | Современные браузеры |
| :host | :host | Выбирает shadow host элемент | :host { display: block; } | Современные браузеры |
| :host(selector) | :host(sel) | Выбирает shadow host, соответствующий селектору | :host(.active) { color: red; } | Современные браузеры |
| :host-context(selector) | :host-context(sel) | Выбирает host в конкретном контексте | :host-context(.dark) { color: white; } | Современные браузеры |
| ::slotted(selector) | ::slotted(sel) | Выбирает контент слота | ::slotted(p) { margin: 0; } | Современные браузеры |
📊 Media Query Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| @media | @media (condition) | Применяет стили в зависимости от медиа-условий | @media (max-width: 768px) { .nav { display: none; } } | IE9+ |
| @supports | @supports (property: value) | Применяет стили, если браузер поддерживает свойство | @supports (display: grid) { .layout { display: grid; } } | Современные браузеры |
| @container | @container (condition) | Применяет стили в зависимости от размера контейнера | @container (min-width: 400px) { .card { flex-direction: row; } } | Современные браузеры |
Quick Examples
css
CSS Code
/* Базовые селекторы */
.header nav ul li a:hover {
color: #007bff;
text-decoration: none;
}
/* Атрибутные селекторы для форм */
input\[type="email"]:focus:valid {
border-color: green;
box-shadow: 0 0 5px rgba(0,255,0,0.3);
}
/* Псевдоэлементы для улучшенной стилизации */
.quote::before {
content: "“";
font-size: 2em;
color: #999;
}
/* Расширенные структурные селекторы */
.grid-item:nth-child(3n+1) {
margin-left: 0;
}
/* Современные логические селекторы */
:is(h1, h2, h3):not(.no-margin) {
margin-top: 2rem;
}Рекомендации и лучшие практики:
Используйте специфические селекторы, чтобы избежать нежелательных конфликтов стилей. Предпочитайте классы вместо ID для повторного использования. Эффективно комбинируйте селекторы для уменьшения размера CSS. Тестируйте псевдоклассы в разных браузерах. Используйте :not() аккуратно, так как это может влиять на производительность. Помните, что псевдоэлементы создают виртуальные элементы в DOM. Учитывайте специфичность при использовании сложных комбинаций селекторов. Используйте атрибутные селекторы для динамического оформления форм. Проверяйте новые селекторы :has() и :is() на поддержку браузеров. Группируйте связанные селекторы для лучшей организации кода. Используйте селекторы-потомки умеренно, чтобы избежать чрезмерного вложения. Некоторые псевдоклассы работают только с определенными элементами.
🧠 Проверьте Свои Знания
Готов к Началу
Reference Knowledge Check
Проверьте свои знания CSS селекторов и их применения.
3
Вопросы
70%
Для Прохождения
∞
Время
∞
Попытки
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху