на главную сниппетовРазбираем необычные CSS селекторы с примерами.
Данный селектор выбирает все элементы на странице. Часто его используют в самом начале документа для указания свойства box-sizing: border box для всех элементов. Но вы можете указывать любые свойства. Я в примере ниже указал цвет текста. Он применится для всех элементов на странице.
* {
box-sizing: border-box;
color: #fc0000;
}Так же данный селектор можно применят для стилизации всех дочерних элементов конкретного элемента. В примере ниже я задаю зеленый цвет для всех элементов внутри .block.
.block * {
color: green;
}Скорее всего вы уже знакомы с селектором id. Это один из самых базовых селекторов. Однако, я советую избегать использования данного селектора для стилизации. ID селектор более функционален для использования из JavaScript. В CSS же он только вносит дополнительную сложность, если вы все элементы стилизуете через классы, а некоторые через id. Так же особенность id это то, что id должен быть уникален, и с помощью него можно выбрать только 1 элемент на странице.
#block {
max-width: 1170px;
background: red;
}Это так же базовый и самый часто используемый селектор. В отличие от id он не должен быть уникален и может использоваться для выбора нескольких элементов на странице. С помощью него стилизуют почти все элементы на странице.
.element {
margin-top: 100px;
}С помощью данного селектора можно выбрать элементы, которые соответствуют заданному контексту. Здесь вы можете передавать другие селекторы, например, классы, ID или название тегов. Давайте рассмотрим такие примеры:
// Тут мы зададим цвет элементу с классом title, который находится внутри элемента с классом container
.container .title {
color: red;
}
// Тут мы зададим цвет все ссылкам, которые находится внутри элемента в id wrapper
#wrapper a {
color: red;
}
// Тут мы зададим цвет всем параграфам, которые находятся в div
div p {
color: red;
}Так же мы можем задавать свойства по условию. Например, сменить цвет элементу, если он имеет указанный класс.
// Если div имеет класс active, меняем ему цвет
div.active {
color: red;
}
// Если элемент с классом menu, имеет класс active, меняем для него margin
.menu.active {
margin-top: 50px;
}Данный селектор помогает выбрать все элементы с указанным типом на странице. Например, мы можем выбрать все ссылки или списки.
// Выберем все ссылки и уберем для них подчеркивание
a {
text-decoration: none;
}
// Выберем все несортированные списки и зададим им margin
ul {
margin-left: 20px;
}С помощью css селектора a:link мы можем выбрать все ссылки, на которые пользователь еще не нажал. С помощью же селектора a:visited мы сможем выбрать те ссылки, по которым пользователь уже переходил. Так же вы можете комбинировать селекторы между собой. Например, стилизовать ссылки с заданным классом, по которых пользователь уже переходил.
// Красим ссылки, по которым пользователь уже переходил
a:visited {
color: grey;
}
// Красим ссылки, по которым пользователь пока не переходил
a:link {
color: red;
}
// Красим ссылки, которые имеют класс active, и по которым пользователь уже переходил
a.active:visited {
color: green;
}Позволяет выбрать элемент, который идет сразу же после указанного элемента.
.block + p {
color: red; // Красим первый параграф, который идет после элемента с классом block
}Позволяет выбрать только тот элемент, который является прямым потомком указанного элемента. Давайте рассмотрим такой код с комментариями.
.block > ul {
margin-left: 10px;
}<div class="block">
<ul> // Сработает для этого элемента
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item
<ul> // Не сработает для этого элемента, так как он не прямой потомок
<li>List item</li>
</ul>
</li>
</ul>
</div>Данный селектор похож на селектор +. Только в отличие от него, он выберет не первый элемент после указанного, а все указанны элементы, расположенные на том же уровне вложенности.
.block ~ p {
color: red; // Красим все параграфы, которые расположены сразу за элементом с классом block
}Это селектор атрибутов. Он выберет все элементы, у которых присутствует указанный атрибут.
a[title] {
color: green; // Красим те ссылки, у которых задан атрибут title
}Данный селектор выбирает те элементы, у которых указан заданный атрибут с заданным значением. Особенностью данного селектора является его строгость. Если ссылка будет хоть немного отличатся, например будет указанно http://google.com или google.com, то селектор не сработает.
a[href="https://google.com"] {
color: red; // Красит те ссылки, которые ссылаются на https://google.com
}
a[title="house"] {
color: green; // Красит те ссылки, у которых атрибут title равен house
}
img[src="house.jpg"] {
width: 200px; // Делаем для картинки, которая показывает house.jpg, ширину в 200 пикселей
}Данный селектор очень похож на предыдущий, однако он является более гибким. Здесь мы указываем то значение, которое должно быть хотя бы частью искомого атрибута. Однако важно помнить, что он слишком обширен. Например, код ниже так же выберет домен, например, ex-google.com, так как в нем есть наша искомая часть.
a[href*="google.com"] {
color: red;
}Данный селектор ищет элементы, у которых начало значения атрибутов соответствую заданному началу строки.
a[href^="http"] {
color: red; // Красит все ссылки, которые начинаются на http
}Данный атрибут очень сильно похож на предыдущий, однако он ищет не по началу строки, а по концу.
img[src$=".jpg"] {
width: 300px; // Для всех картинок, с расширением .jpg задаем ширину в 300 пикселей.
}Данный селектор помогает выбрать элементы в зависимости от значения data атрибута. Давайте в примере ниже выберем все ссылки, которые ведут на внешний источник.
<a href="https://google.com" data-origin="external">Google</a>a[data-origin="external"] {
color: blue; // Красим все ссылки, у которых значение data атрибута равно указанному
}Данный селектор похож на предыдущий, но добавляет некоторую гибкость. С помощью него мы можем выбрать атрибут, у которого есть значения, разделенные пробелом. Теперь давайте выберем ссылки на внешнее изображение.
<a href="https://google.com/image.jpg" data-origin="external image">Посмотреть картинку</a>Теперь мы можем выбрать данную ссылку двумя способами.
a[data-origin="external"] {
color: red;
}
a[data-origin="image"] {
border: 1px solid #000000;
}Как видно из названия, данный селектор выбирает только отмеченные/выбранные чекбоксы и радио кнопки. В примере ниже мы объединим несколько уже пройденных селекторов. Мы будем красить label, в зависимости от состояния чекбокса.
<input class="checkbox" type="checkbox" id="checkbox">
<label for="checkbox">Нажми на меня</label>.checkbox:checked + label {
color: red; // Если чекбокс активен, то красим label, который идет за ним
}Тут мы получаем псевдоклассы определенного элемента. Они позволяют нам добавить контент вокруг данного элемента. В примере ниже мы добавим красную точку после элемента с классом block.
.block {
position: relative;
}
.block::after {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background: red;
position: absolute;
transform: translateY(-50%);
}Тоже очень часто используемый селектор. Позволяет присваивать стили при наведении на элемент.
.block:hover {
color: red; // Красим цвет текста элемента при наведении
}Псевдокласс отрицания может быть очень полезен, если вам нужно выбрать все элементы кроме тех, которые соответствую указанному условию.
div:not(.block) {
color: red; // Красим все div, кроме того, что имеет класс block
}Мы можем использовать данный селектор для стилизации определенной части элемента. Ниже я приведу более детальное описание с примерами, так как их есть несколько.
p::first-line {
color: red; // Красим первую строчку параграфов
}p::first-letter {
color: red; // Красим первую букву параграфов
}Помогает выбрать элемент в зависимости от его позиции на данном уровне вложенности.
.block a:nth-child(2) {
color: red; // Красим вторую ссылку внутри блока
}
.block a:nth-child(6) {
color: red; // Красим шестую ссылку внутри блока
}Позволяет выбрать определенный элемент с конца.
.block a:nth-last-child(1) {
color: red; // Красим последнюю ссылку внутри блока
}
.block a:nth-last-child(3) {
color: red; // Красим третью ссылку с конца внутри блока
}Очень похож на селектор :nth-child, однако он работает не для всех дочерних элементов, а только для тех, которые соответствуют типу. Важной особенностью является то, что считает он так же только элементы с нужным типом.
.block a:nth-of-type(2) {
color: red; // Красит вторую ссылку на данном уровне вложенности
}Работает как селектор выше, но начинает считать с конца.
.block a:nth-last-of-type(2) {
color: red; // Красит вторую ссылку с конца на данном уровне вложенности
}Этот псевдокласс выбирает первый дочерний элемент.
.block a:first-child {
color: red; // Красим превую ссылку внутри блока
}Этот псевдокласс выбирает последний дочерний элемент.
block a:last-child {
color: red; // Красим последнюю ссылку внутри блока
}Откровенно говоря, вы вря дли будете хоть сколько-нибудь часто использовать данный селектор. Он позволяет выбрать элемент, если он единственный дочерний элемент другого элемента.
.block p:only-child {
color: red; // Красит параграф, если он единственный дочерний элемент блока
}Позволяет выбрать элемент, если он единственный элемент заданного типа у родителя.
.block a:only-of-type {
color: red; // Красим ссылку, если она единственная в блоке
}Выбирает первый элемент указанного типа. Нумерация начинается только с нужного типа элемента.
.block a:fist-of-type {
color: red; // Выбирает первую ссылку внутри блока
}
➕
CSS: полный справочник
1090 страниц · 2019 · 178.58 MB · русский
by Эрик А. Мейер & Эстелл Уэйл
CSS для профи
498 страниц · 2019 · 40.37 MB · русский
by Кит Грант
