CSS селекторы
Селекторы – это описание тех элементов страницы, к которым будут применяться определенные свойства. Обычно новички довольствуются тремя основными типами селекторов: класса, id и элемента, но их существует значительно большее количество. Настоящий профессионал должен хорошо ориентироваться во всех возможных видах селекторов в CSS.
Простые селекторы
Синтаксис селектора следующий: сначала указывается его вид, после чего открывается фигурная скобка, в которую записываются все необходимые свойства, после чего она закрывается.
Простые селекторы могут указывать на класс, id и тип элемента. Самый простой из них – последний. Достаточно просто указать тег элемента. Например, так выглядит селектор, указывающий на все ссылки в документе: a {}. Если надо стилизовать все параграфы на странице, селектор будет следующий: p {}.
Внутри селектора прописываются свойства, после которых ставится точка с запятой. Например, если нам нужно задать фоновый цвет всех параграфов в тексте, код будет следующий:
p { background-color: red; /* нельзя забывать о точке с запятой после описания свойства */ }
Селектор класса указывает браузеру на элементы, которым присвоен определенный класс (он задается в html с помощью атрибута class). Он обозначается точкой. Предположим, необходимо стилизовать несколько кнопок «купить», обозначающие различные товары.
Необходимо прописать три кнопки с классом buy в HTML.
<button class=”buy”>Купить смартфон</button> <button class=”buy”>Купить планшет</button> <button class=”buy”>Купить компьютер</button>
Далее прописывается селектор .buy {}. В результате получится такой код.
<html> <head> <title>Подчеркивание текста</title> <style> .buy { background-color: blue; color: white; } #back { background-color: black; color: red; } </style> </head> <body> <button class="buy">Купить смартфон</button> <button class="buy">Купить планшет</button> <button class="buy">Купить компьютер</button> <button id="back">Вернуться назад</button> </body> </html>
Селектор со знаком решетки указывает на айди элемента. Это третий тип простого селектора. Браузер отобразит следующее.
Видим, что селектор класса с прописанными в нем свойствами присвоил всем кнопкам, позволяющим купить какой-то товар, синий цвет и белые буквы. А id-селектор обозначил кнопку для возвращения назад, и свойства внутри него сделали фон элемента черным, а буквы – красными.
При этом не рекомендуется злоупотреблять id-селекторами. Идентификатор может использоваться только один раз. Лучше использовать теги или псевдоклассы.
Нестандартные селекторы
Большая часть селекторов, приводимых в этом разделе, поддерживаются только современными браузерами. При этом если их знать, можно более гибко стилизовать страницу.
X Y
Это так называемый контекстный или вложенный селектор. С его помощью можно стилизовать элементы, которые соответствуют определенному контексту. Например, можно настроить стили ссылок, которые находятся в таблице или несортированном списке. Также поддерживаются все популярные браузеры. Например, так.
li a { text-decoration: none; }
*
Это универсальный селектор CSS, который позволяет стилизовать любой элемент веб-страницы. Наиболее часто его применяют для обнуления свойств margin и padding. Но этот селектор очень тяжел для браузера, поэтому лучше его использовать в тестовом режиме.
Еще одно его применение – стилизация всех дочерних элементов. Например, так.
#container * { border: 2px solid yellow; }
Селектор совместим со всеми популярными браузерами, включая IE 6 версии и выше.
Псевдоклассы
Псевдоклассы используются для стилизации особых стилей. Например, для ссылок доступно два псевдокласса: link (непосещенные ссылки) и visited (посещенные). Поддерживается минимально седьмой версией Internet Explorer.
Код может выглядеть, например, так: a:link { color: navy }.
Особый вид псевдоклассов – динамические (событийные). Позволяют реализовать стилизацию элемента при наведении на них мышью (:hover), активизированных (:active) и получивших фокус (:focus). Старые версии IE не поддерживают этот псевдокласс на элементах, не являющихся ссылками.
Псевдокласс :checked позволяет задать дизайн отмеченным радиокнопкам и чекбоксам.
Особенно популярны псевдоклассы :before и :after, которые позволяют гибко настроить внешний вид содержимого страницы. Например, с помощью них можно добавить пустую строку перед и после элемента соответственно.
Может пригодиться и псевдокласс отрицания. Он используется для выбора всех элементов кроме какого-то конкретного (или группы). Например, если нужно выбрать все дивы кроме блока с айди nott, то можно прописать такой код.
div:not(#nott) { color: blue; }
Выбрать определенный элемент в стеке можно с помощью псевдокласса :nth-child(n). В качестве параметра нужно указать число. Например, если задать в скобках цифру 4, то появится возможность выбрать четвертый элемент в стеке. Вот как работает css селектор nth child.
Если использовать псевдокласс :nth-last-child(n), можно выбрать определенный элемент с конца. Работает он так же, как nth child, только зеркально. Очень выручает, если список большой.
А выбрать определенный элемент по типу можно с помощью псевдокласса nth-of-type(n). Например, если есть пять ссылок, можно изменить дизайн третьей. Аналогично, изменить определенный элемент конкретного типа с конца можно с помощью псевдокласса :nth-last-of-type(n).
Еще один популярный псевдокласс – :first-child. С его помощью можно указать браузеру на первый дочерний элемент. Нередко он применяется, чтобы убрать рамки вокруг первого и последнего элементов. Аналогично, псевдокласс :last-child выбирает последний дочерний элемент.
Псевдоэлементы
Псевдоэлементы могут задавать стиль первой линии и первой буквы текста. В первом случае используется селектор p::first-line, а во втором – p::first-letter. Псевдоэлементы обозначаются двумя двоеточиями. Для старых псевдоэлементов подходит и синтаксис с одним двоеточием, но задать новые таким способом не получится. Поэтому рекомендуется указывать два двоеточия.
X + Y
Этот селектор указывает только на элемент, который сразу следует за заданным. Например, такой код стилизует лишь те параграфы, которые располагаются сразу за списком.
ul + p { color: red; }
Более «мягкая» версия этого селектора – X ~ Y. Он позволяет стилизовать все элементы Y, которые находятся после элемента X. Например, селектор a ~ p подействует на все абзацы, которые следуют за ссылкой.
X > Y
Позволяет указать браузеру на прямой дочерний элемент. Особенно хорошо использовать этот селектор одновременно с JavaScript.
Селектор атрибута
Позволяет выбрать лишь элементы с определенным атрибутом. Выглядит он так: a[title]. В квадратных скобках можно указать значение атрибута. Например, a[href=»http://google.com»]. Значение атрибута обязательно включать в кавычки. Можно задать часть атрибута с помощью звездочки. Код будет выглядеть так.
a[href*="google"] { color: #1f6053; /* google green */ }
Так можно задать все ссылки, ведущие на сайт популярнейшей поисковой системы, независимо от доменной зоны, в которой они находятся. Он сможет стилизовать ссылки, ведущие и на google.com, и на google.ru.
Если вместо звездочки указать знак ^, то можно задать начало атрибута, а знак доллара указывает на его конец. Например, селектор a[href^=»http»] выбирает все ссылки, которые начинаются с http, а селектор a[href$=».jpg»] выбирает все ссылки, ведущие на изображение формата JPG.
Приоритетность селекторов
Если для одного и того же элемента используются разные свойства, браузеру нужно решить, какое из них применять. Поэтому разные селекторы имеют различные приоритеты. Это называется специфичностью. Например, в ряде селекторов к одному и тому же элементу (например, параграфу) больший вес имеет последний. Есть ряд других принципов вычисления приоритетности селекторов. Так, наибольший вес имеет идентификатор (100), несколько меньший – класс (10), а самый маленький – айди (1).
Поэтому чтобы избежать конфликта противоречивых правил, нужно следовать таким простым рекомендациям:
- Не стоит использовать id-селекторы, даже если такой элемент только один, поскольку классы имеют больший вес.
- Не надо к одному элементу присваивать несколько классов.
- Не следует применять стили непосредственно в HTML-тегах. Например, так делать нельзя: < div style="background: blue;">. Стили задаются только в CSS-блоках.
Комбинации селекторов
Комбинирование селекторов между собой позволяет сделать код более компактным. Стиль задается, исходя из положения элементов относительно друг друга.
Один из способов комбинирования селекторов – группирование. С его помощью можно стилизовать сразу несколько элементов. Чтобы это сделать, надо перечислить с помощью запятой необходимые элементы, а потом поставить фигурные скобки, в которых и прописываются одинаковые стили. Например, так: h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; }. А потом можно отдельно прописывать другие свойства, специфичные для каждого элемента стандартным способом. Например, h3 { font-size: 1.2rem; color: #900; }.
В перечень можно вносить не только селекторы одного типа, но и другие. Например, h2, .block, .msg { background: #fff; }.
Другие способы комбинирования селекторов подробно описаны выше. Например, селекторы потомка A > B или смежные селекторы A + B.
Родительский селектор
К сожалению, способов выбрать родительский селектор в CSS нет. Поэтому приходится пользоваться JavaScript для выбора старшего элемента. Штатными средствами CSS можно разве что прописать селектор класса, и это тоже неплохой способ.