CSS-селекторы и их виды

CSS-селекторы – это определенная CSS-структура, позволяющая выбрать определенный элемент в HTML-коде и стилизовать его. Каждый из них обладает своей специфичностью, то есть может перекрывать по свойствам другие, более «слабые».

Селектор CSS по тегу и классу

Самые простые селекторы – по тегу и по классу. Селектор по тегу самый общий и выбирает все элементы с определенным тегом. Например, можно написать в свойствах CSS-код следующего вида: «p {color: blue}», где «p» – тег абзаца, а свойство «color: blue» обозначает цвет текста. В результате текст во всех абзацах окрасится в синий цвет. Селекторы по тегу можно перечислить через запятую, тогда не нужно будет писать свойство дважды.

Если некоторым абзацам присвоить какой-то класс, например «blue», тогда срабатывание селектора CSS можно настроить еще более точно. Но его запись в свойствах будет отличаться – перед названием класса появится точка. То есть, чтобы выбрать все абзацы, которым присвоен класс «blue» и окрасить их в синий цвет, нужно в свойствах CSS написать такой код: «.blue: {color: blue}». Этот селектор более специфичный, чем CSS-селектор по тегу, и сильнее его, но относится к самым простым. Существуют и более сложные правила, позволяющие выбирать небольшие группы элементов.

Особенности селекторов по идентификатору

Селекторы по id или по идентификатору более специфичны, чем по классу и по атрибуту. То есть при использовании в каскаде они будут «перевешивать» остальные подобные селекторы. Идентификаторы также помогают точно выбрать определенный элемент в коде, но их использование при оформлении страниц считается плохой практикой среди верстальщиков. Только в очень редких случаях, например при создании слайдера на CSS, такая практика допустима. Дело в том, что в пределах одной страницы может быть только один элемент с определенным id. Следовательно, из-за уникальности селектора CSS по id он может использоваться только для одного-единственного элемента. В этом случае намного логичнее использовать классы, а не идентификаторы.

Различные мнения о селекторе по id

Но существует и противоположное мнение, что идентификатор помогает определить тот фрагмент кода на странице, который должен быть в единственном экземпляре. При этом, хотя селекторы по классам могут заменить его, они должны использоваться для больших групп элементов, а в тех местах, где требуется точность, лучше использовать id. Каждый верстальщик вправе выработать свое личное мнение по этому вопросу и писать код в своей собственной стилистике. При написании селектора по id перед ним используется символ «#». То есть строка кода будет выглядеть так: «#blue: {color: blue}». При такой записи будет окрашен в синий цвет элемент с идентификатором «#blue».

Использование каскада

При использовании в HTML селекторов CSS по id можно также использовать свойство каскадности. Например, если внутри тега с идентификатором нужно выбрать какой-то дочерний тег и изменить его свойства, сначала нужно записать имя идентификатора с решеткой, затем дочерний тег и его свойства. Такие селекторы называются вложенными. То есть строка кода будет выглядеть примерно так: «#id p {color: blue}». Тогда внутри родительского элемента с этим идентификатором у дочернего абзаца цвет текста изменится на синий.

Использование селекторов дочерних элементов

Еще один вариант использования каскада для изменения свойств дочерних элементов используется, если нужно выбрать только определенную часть кода. Его также называют селектором потомков. Например, чтобы выбрать абзац внутри какой-то строки таблицы, используется следующая запись CSS селектора: «ul li > p: {color: blue}». Стоит обратить внимание на то, что чем длиннее запись, тем выше вероятность, что получится изменить какое-то конкретное свойство элемента, так как он становится более приоритетным для каскада. Например, элементы с каким-то другим свойством CSS-селектора по классу, который является родительским, не изменит свои свойства полностью. Перекрасится только определенная часть текста внутри списка.

Селектор сестринских элементов

Еще один интересный способ использования каскадности - соседние селекторы CSS. Записываются они как сумма селекторов: «span + a {color blue}». При этом соседом считается тот, под которым есть еще один, подходящий под нужные параметры. Таким образом, если в коде есть три элемента, то к первому из них свойство не применится, потому что у него нет соседнего, а ко всем последующим - да. Так происходит из-за значка суммы, когда складываются последующие селекторы, а не предыдущие. Такая запись помогает сократить код и не записывать несколько CSS-селекторов для разных тегов, применяя к ним одинаковые свойства. Если второму элементу списка задать дополнительно еще и класс, а запись изменить на «.class + a{color blue}», тогда отсчет пойдет от него и свойства изменятся у последующих подходящих под правило элементов, а два первых останутся прежними.

Теперь предположим, что в нашем коде есть три одинаковых тега с различными классами и нужно выбрать все элементы после какого-то определенного. В этом случае не поможет применение только лишь селекторов тегов CSS. Для этого используется селектор следующего вида: «.class ~ div». При этом выбираются элементы с тегом div, которые идут после заданного класса. Если мы хотим выбрать не только элементы с тегом div, но и все последующие, вместо тега после знака тильды нужно поставить символ звездочки - «*». Такая запись будет означать, что нужно выбрать все, что следует после заданного класса. Можно выбрать вообще все элементы на странице, если оставить в качестве селектора только звездочку.

Селекторы по CSS-атрибуту

Допустим, что в нашем коде присутствуют элементы с какими-то атрибутами, но все они отличаются друг от друга и написаны через дефис, а нам нужно выбрать все те, у которых название класса начинается с определенного слова, например «selector», и классы разделены знаком «-». Что нужно делать в этом случае? Запись селектора начинается с квадратных скобок, куда сначала записывается название атрибута, затем вертикальный слеш, знак «=» и «selector»: «data- |= selector». Далее пишем нужное свойство, которое хочется изменить. В результате выберется элемент с заданными параметрами. Меняя классы, можно менять и свойства определенных частей кода. Если же имена классов записаны не через дефис, а одним словом, тогда их тоже можно выбрать, но используя немного другую запись. В этом случае вертикальный слеш заменяется символом «^»: «data^ = selector». Такой селектор выбирает подстроку с началом названия класса.

Как выбрать элемент с определенным окончанием в названии класса

Теперь поступим иначе и выберем части кода не по началу описания класса, а по последним буквам в его названии. Для этого нам понадобится значок доллара. Ставим его на место галочки, а после знака равенства пишем окончание названия класса: «data$ = ctor». Теперь элементы с этим сочетанием букв будут выбраны и к ним применены определенные свойства. Выбирать можно любой атрибут. Разберем, как поступить, если нам нужно найти элемент с каким-то буквосочетанием в середине слова. В этом случае меняем знак доллара на звездочку, а после знака равенства пишем нужные буквы: «data* = ct».

Псевдоклассы – особые селекторы

Для ссылок обычно используются специальные селекторы стилей CSS, которые отображают различные их состояния: спокойное, в фокусе, активное, пройденное – они называются псевдоклассами. Псевдокласс для активной ссылки, на которую наведен курсор, пишется так: «а:active». Далее идут какие-то свойства, чаще всего меняется фон или добавляется тень. Если добавить это свойство для ссылки и кликнуть по ней, она изменить свой цвет на заданный. Еще один псевдокласс – hover показывает, что ссылка уже пройдена. Записывается он так: «a:hover».

Особенности состояний active и focus

Active часто путают с другим состоянием – focus. Записывается оно так: «a:focus» и обозначает активное состояние кнопки при работе с клавиатуры. То есть, если использовать клавишу TAB, активная ссылка будет выделяться особым цветом. Это свойство обязательно нужно использовать, так как пользоваться мышью для навигации по сайту могут не все пользователи. У некоторых может быть слабое зрение или другие ограничения по здоровью, потому перемещаются они по странице при помощи клавиш или специальных приспособлений. Игнорирование состояния кнопки в фокусе является большим минусом для такого параметра в дизайне сайта, как доступность, и оказывает значительное влияние на его посещаемость особой категорией пользователей. При обычной навигации при помощи мышки ссылка становится одновременно активной и в фокусе. Поэтому при стилизации элементов важно обращать внимание на это.

Псевдоэлементы

Псевдоэлементы позволяют задавать особые стили без его определения в самой структуре HTML. Записываются они так: имя селектора, знак «::», имя псевдоэлемента. Наиболее распространены элементы «before» и «after». У них есть свойство «content», они не могут применяться к внутренним стилям. «After» нужен для добавления какого-то контента после содержимого определенного элемента. Что именно нужно вставить, записывается в свойство «content». Аналогичным образом, псевдоэлемент «before» добавляет контент перед содержимым элемента. Использование этих особых селекторов позволяет сократить код и не писать каждый раз новую структуру для какой-то его части, если нужно добавить небольшую деталь в определенное место контейнера. Они очень часто используются при стилизации страниц и добавлении каких-то декоративных элементов. Комбинации всех этих вариантов помогают создавать необычные эффекты на странице и очень помогают работе верстальщика.