Типы селекторов и их назначение. CSS Selectors
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» добавляет контент перед содержимым элемента. Использование этих особых селекторов позволяет сократить код и не писать каждый раз новую структуру для какой-то его части, если нужно добавить небольшую деталь в определенное место контейнера. Они очень часто используются при стилизации страниц и добавлении каких-то декоративных элементов. Комбинации всех этих вариантов помогают создавать необычные эффекты на странице и очень помогают работе верстальщика.
". Итак, селектор - это элемент, к которому применяется объявление в правиле стиля.
Термины, используемые в описании правил CSS.
Рис.1. Обычное правило CSS. Рис.2. Пример правила CSS.
Коротко про синтаксис записи правил CSS:
- Объявление стиля в парвиле берётся в фигурные скобки - {}
- Свойство и значение в объявлении разделяются двоеточием - :
- В одном объявлении (в одной паре фигурных скобок) может быть указано сколько угодно пар свойство: значение
- В конце каждой пары свойство: значение ставится точка с запятой - ;
- После последней пары свойство: значение точку с запятой ставить не обязательно.
- Синтаксис CSS не чувствителен пробельным символам (пробелы, табуляция, переносы сток).
- Синтаксис CSS не чувствителен к регистру символов.
В качесте селекторов может выступать любой тег HTML, также есть селекторы класса либо id-селекторы. Рассмотрим всё по порядку.
Селекторы тегов
Как писалось ранее, любой тег может быть селектором в правиле CSS. Рассмотрим пример.
Привет!
Заголовок h2!
Кстати, можно группе селекторов задать одно объявление. Например, мы хотим чтобы теги заголовков
,
и
были синего цвета и выравнивались по центру блока. Для этого можно в селекторе перечислить эти теги, разделив их запятой. Вот пример кода:
были синего цвета и выравнивались по центру блока. Для этого можно в селекторе перечислить эти теги, разделив их запятой. Вот пример кода:
Привет h1!
Заголовок h2!
Такая запись стиля равносильна следующей группе правил:
Селекторы потомков
Можно назначать стилевые правила элементам в зависимости от того, вложен ли этот элемент в другой. Если один тег вложен в другой, то вложенный тег называется его потомком, а тег в который вложен потомок называется предком. Например, нужно задать абзацам
Внутри таблицы
Привет!Текст абзаца в таблице. |
Текст абзаца вне таблицы.
Все теги
Во всех таблицах документа будут отображать цвет красным цветом. Обратите внимание, то тег
Находящийся внутри тега
На самом деле, вместо
, так как тег
Составной селектор - это последовательность простых селекторов, которые не разделены комбинаторами, т. е. за одним селектором сразу идёт следующий. Он выбирает элемент, который соответствует всем простым селекторам, которые он содержит. Селектор типа или универсальный селектор, входящий в составной селектор, должен быть расположен первым в этой последовательности. В составном селекторе допустим только один селектор типа или универсальный селектор. Span.className p.className1.className2#someId:hover Сложный селектор - это последовательность селекторов, которые разделены комбинаторами. Список селекторов - это селекторы, перечисленные через запятую. КомбинаторыДля объединения простых CSS селекторов, используются комбинаторы, которые указывают взаимосвязь между простыми селекторами. Существует несколько различных комбинаторов в CSS2, и один дополнительный в CSS3, когда вы их используете, они меняют характер самого селектора. Псевдо-классыПсевдо-класс – это простой селектор, который используется для выбора того, что не может быть выбрано с помощью других селекторов или может быть выбрано, но достаточно трудным способом.
Псевдо-элементыПсевдо-элемент – это виртуальный элемент, который не существует в явном виде в дереве элементов документа. Псевдо-элементы используются для выбора тех частей элемента, которые не могут быть выбраны с помощью других селекторов, а также для стилизации не всего элемента, а отдельных его частей. |