Селекторы CSS3


Оглавление (нажмите, чтобы открыть):

3. CSS — Селекторы: синтаксис, виды, правила и группировка

CSS содержит правила стиля, которые интерпретируются браузером, а затем применяются к соответствующим элементам вашего документа. Правило стиля состоит из трех частей:

    Селектор — это HTML-тег, к которому будет применяться стиль. Это может быть любой тег, например,

или

и т.д.
  • Свойство — это тип атрибута HTML-тега. Проще говоря, все атрибуты в HTML преобразуются в свойства CSS. Ими могут быть цвета, границы, отступы и т.д.
  • Значение — задается свойству. Например, свойство цвета может иметь значение green, #008000 и т.д.
  • Синтаксис селекторов в CSS следующий:

    Пример. Вы можете задать границу таблицы следующим образом:

    Здесь синтаксис селектора такой: table — это селектор, а border — свойство, а 2px solid #FF8C00 — значение этого свойства.

    Вы можете задавать селекторы различными способами, как Вам будет удобно. Ниже представлены виды селекторов.

    Содержание

    Стандартные селекторы

    Это тот же самый селектор, который Вы видели выше. Опять же, еще один пример, чтобы дать цвет всем заголовкам первого уровня:

    Универсальные селекторы

    Вместо того, чтобы выбирать элементы определенного типа, универсальный селектор вполне просто соответствует имени любого типа элемента:

    Это правило отображает в нашем документе содержимое каждого элемента в сером цвете.

    Селекторы потомков или вложенные селекторы

    Предположим, Вы хотите применить правило стиля к определенному элементу только тогда, когда оно находится внутри определенного элемента, то в этом Вам помогут вложенные селекторы или селекторы потомков. Как показано в следующем примере, правило стиля будет применяться к элементу только тогда, когда оно находится внутри тега

      .

    Селекторы класса

    Вы можете задать правила стиля для элементов на основе атрибута class. Все элементы, имеющие этот класс, будут отформатированы в соответствии с определенным правилом.

    Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом . Вы можете сделать селектор класса немного более конкретным. Например:

    Это правило отображает содержимое в синем цвете только для элементов

    с атрибутом .

    Вы можете применить к одному элементу несколько селекторов класса. Рассмотрим следующий пример:

    ID селекторы

    Вы можете задать правила стиля для элементов на основе атрибутa id. Все элементы, имеющие этот идентификатор, будут отформатированы в соответствии с определенным правилом.

    Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом . Вы можете сделать id селектор немного более конкретным. Например:

    Это правило отображает содержимое в синем цвете только для элементов

    с атрибутом .

    Истинная мощность id селекторов — это когда они используются в качестве основы для селекторов-потомков, например:

    В этом примере все заголовки второго уровня будут отображаться в синем цвете, когда они будут находиться в тегах с атрибутом .

    Дочерние селекторы

    Вы уже знаете селекторы потомков. Существует еще один тип селектора, который очень похож на селекторы потомков, но имеет другую функциональность, это дочерний селектор. Рассмотрим следующий пример:

    Это правило будет отображать все абзацы в синем цвете, если они являются прямым дочерним элементом . Другие абзацы, помещенные внутри других элементов типа

    или

    Соседние селекторы

    HTML-элементы, идущие друг за другом, называются соседними. Рассмотрим следующий пример:

    Это правило будет отображать содержимое тега в синем цвете, если он идет после элемента . Другие теги , идущие не после тега , не будут иметь никакого эффекта этого правила.

    Селекторы атрибутов

    Вы также можете применять стили к HTML-элементам с определенными атрибутами. Ниже правило стиля будет соответствовать всем input элементам, имеющим атрибут type со значением text:

    Преимущество использования селекторов атрибутов заключается в том, что элемент не изменяется, а цвет применяется только к нужным текстовым полям.

    Для селектора атрибутов применяются следующие правила:

    • p[lang] — выбирает все элементы абзаца с атрибутом lang.
    • p[lang=»ru»] — выбирает все элементы абзаца, где атрибут lang имеет точное значение «ru».
    • p[lang

    =»ru»] — выбирает все элементы абзаца, где атрибут lang содержит слово «ru».

  • p[lang|=»ru»] — выбирает все элементы абзаца, где атрибут lang содержит значения, которые являются точными «ru» или начинаются с «ru».
  • Несколько правил стиля

    Возможно, Вам потребуется определить несколько правил стиля для одного элемента. Вы можете задать эти правила для объединения нескольких свойств и соответствующих значений в один блок, как показано в следующем примере:

    Все пары свойств и значений разделяются точкой с запятой (;). Вы можете сохранить их в одной строке или нескольких строках. Для лучшей читаемости сохраняйте их в отдельных строках.

    Не беспокойтесь о свойствах, упомянутых в вышеупомянутом блоке. Эти свойства будут объяснены в следующих уроках.

    Группировка селекторов в CSS

    Вы можете применить стиль для многих селекторов, если хотите. Просто отделите селектора запятой, как показано в следующем примере:

    Это правило стиля будет применено к элементам h1, h2 и h3. Порядок списка при группировки селекторов не имеет значения. Все элементы в селекторе будут иметь соответствующие объявления, применяемые к ним.

    Вы можете группировать различные id селектора вместе, как показано ниже:

    Селекторы CSS — полное руководство с примерами

    Селекторы CSS

    Сегодня мы рассмотрим такое понятие как селекторы CSS и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище.

    Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор.

    Селекторы class и id

    В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

    На что стоит обратить внимание:

    • Классы и идентификаторы можно присваивать любым (всем) тегам.
    • Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
    • Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
    • Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
    • Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.

    Как обратиться к классу или id в файле стилей (CSS)?

    В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.).

    Использование классов и идентификаторов очень удобно, но оно увеличивает нашу HTML разметку, в идеале (которого никогда нет) мы вовсе не должны их использовать, вместо них мы будем использовать комбинации и группировки селекторов, о них и будет вся остальная часть статьи, но! Но это совсем не означает, что вы должны полностью отказаться от использования классов и идентификаторов, просто вы должны иметь ввиду, что очень часто вместо создания нового class или id можно обойтись приёмами, описанными ниже и они также могут быть вполне удобны.

    В чём различие class и id?

    Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:

    То цвет текста станет красным, несмотря на то, что класс находится ниже по коду и если бы у них был равный приоритет текст стал бы синим.

    По синтаксису: в случаи с классом мы можем выбрать, у какого именно тега должен находиться данный класс, для этого после имени тега БЕЗ пробела мы должны обратиться к классу. Пример:

    Для id это тоже будет работать, но такая запись лишена всякого смысла, так как id не может повторяться на странице, а значит достаточно просто объявлять id, без тега к которому оно относится:

    Вроде бы осталось только одно неоговорённое отличие, и оно касается темы, которую в ближайшем будущем я не планировал затрагивать на этом блоге – Javascript. Но всё же обязан доложить вам о нём: если вы хотите обратиться к элементу с помощью Javascript, то для этой цели очень удобным будет наличие id у этого элемента. Чтобы обратиться к элементу по его классу в Javascript нет такой встроенной возможности, вам придётся использовать вспомогательные функции + это не всегда кроссбраузерно.

    Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно.

    Родственный селектор

    Идём дальше. Из статьи о наследовании в CSS вы уже знаете о двух самых простых видах селекторов, это селектор по тегу (элементу) и по потомку. Давайте освежим вашу память:

    Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:

    В таком случае мы должны использовать так называемый родственный селектор, для его обозначения используется угловая скобка, пробелы можете ставить, можете не ставить, я бы не советовал:

    Универсальный селектор

    С этим разобрались, у нас на вооружении уже 3 вида селекторов, теперь хочу вам рассказать о весьма необычном селекторе, который выделяется среди всех остальных – это так называемый универсальный селектор, который обозначается звёздочкой (*):

    Так у меня начинается каждый новый проект, советую вам делать также. Универсальный селектор распространяется на все элементы страницы (теги), но имеет нулевой приоритет (ниже только отсутствие приоритета вовсе). Его обычно используют, чтобы перебить CSS свойства, которые браузеры устанавливают по умолчанию для некоторых тегов. Представьте себе, и такое имеет место быть! Достаточно многим тегам браузеры по умолчанию устанавливают свои свойства, например, тегу гиперссылки синий цвет текста и подчёркивание, тегу body они задают поля (padding) и тд. Нам это запоминать, знать и использовать совсем не к чему, поэтому самые банальные свойства мы сразу же убираем с помощью универсального селектора, однако я бы не советовал дописывать в него что-то ещё (или дописывать, но аккуратно), несмотря на наименьший (нулевой) приоритет универсального селектора, он в некоторых случаях всё же может перебить вам другие свойства, так что имейте это в виду.

    Кстати говоря, при работе с селекторами, как и при любой работе связанной с вёрсткой макета очень удобно использовать просмотр элементов страницы. Если вы ещё не в курсе таких вещей как Opera Dragonfly, Firebug и веб-инспекторы в целом, то вам без преувеличений срочно нужно прочесть статью по ссылке выше! А кто уже использовал подобные вещи, прошу дальше за мной.

    Псевдо-классы

    В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся ( :first-child, :link, :visited, : lang() ):

    Естественно можно комбинировать селекторы как захотим, например:

    Название представленного выше псевдо-класса говорит само за себя first-child — первый ребёнок.

    Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:

    Псевдо-класс :lang() используется для задания разного стиля оформления в зависимости от языка. В скобочках указывается язык, к которому нужно применить оформление. Это можно использовать, например, для задания разных стилей кавычек в цитатах:

    Это, пожалуй, единственный из всех возможных видов селекторов, который я никогда не использовал.

    Динамические псевдо-классы

    Динамические псевдо-классы – это :active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение:

    Примените данные стили к нашему примеру выше, и вы сами всё увидите.

    Смежные селекторы

    Смежные селекторы – это ближайший сосед ниже по коду, не ребёнок! Очень удобный селектор:

    Обобщённые смежные селекторы

    Обобщённые смежные селекторы действуют точно также как и обычные смежные селекторы, за исключением того, что свойства применяются не только к первому соседу ниже, а ко всем заданным соседям ниже:

    Селекторы атрибутов

    Селекторы атрибутов позволяют нам обратиться к тегам, имеющим необходимый нам атрибут или даже конкретное его значение:

    CSS 3 псевдо-классы

    Вы уже ознакомились со всеми основными селекторами и вам на первых парах этого должно хватить с горкой. Однако в CSS 3 появилось множество новых псевдо-классов, теперь мы можем брать не только первого ребёнка, но и любого другого по счёту, можем идти от обратного, брать не первого, а последнего ребёнка и так далее и тому подобное. Всё это очень удобно и практично, разве что у вас могут возникнуть проблемы со старыми версиями IE. Давайте соберём все силы в кулак и пробежимся по всем оставшимся селекторам, чтобы потом уже вы могли иметь их ввиду при вёрстке собственного макета.

    :last-child – аналог :first-child, только берёт не первого, а последнего ребёнка.

    :only-child – сработает, если элемент (тег) является единственным ребёнком.

    :only-of-type — сработает, если элемент (тег) является единственным ребёнком своего типа.

    :nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:

    :nth-last-child – работает также как и предыдущий, но отчёт начинается с конца.

    :first-of-type – первый ребёнок своего типа в рамках прямого родителя.

    :last-of-type – последний ребёнок своего типа в рамках прямого родителя.

    :empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста).

    :not() – делает исключение для заданных элементов. Пример:

    Управление полями, формами, переключателями и флажками в CSS

    :enabled — применяется к доступным элементам интерфейса как формы, кнопки, переключатели и тд. По умолчанию все элементы интерфейса являются доступными.

    :disabled — применяется к заблокированным элементам интерфейса как кнопки, формы и так далее. Элементы интерфейса являются заблокированными, если к ним в HTML добавить атрибут disabled или в XHTML disabled=”disabled”.

    :checked – применяется к элементам интерфейса типа флажки (radio) и переключатели (checkbox), когда они находятся во включённом положении.

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

    Псевдо-элементы, аналогично псевдо-классам вычисляются браузером автоматически, нам об этом заботиться не нужно. Чтобы не путать псевдо-элементы с псевдо-классами в спецификации CSS 3 было решено использовать двойное двоеточие, вместо одинарного, как было в CSS 2. Поэтому в Интернете вы можете встретить псевдо-элементы как с одинарным двоеточием так и с двойным – и тот и тот вариант верен. Однако для лучшей совместимости с IE рекомендуют использовать одинарное двоеточие.

    :first-line – первая строка внутри блочного или табличного элемента.

    :first-letter – первая буква внутри блочного элемента.

    :before и :after – используются чтобы с помощью CSS вставить содержимое до или после элемента, к которому они относятся, лично я ими не пользовался, поэтому сильно расписывать не буду. А как часто вы используете данные псевдо-элементы в своих проектах? Можете поделиться своим опытом в комментариях к данной статье.

    Итоги: теперь вы знаете и можете использовать всю мощь каскадных таблиц стилей, однако это не значит, что нужно сразу ринуться верстать макеты сайтов, используя как можно больше изученных сегодня селекторов, псевдо-классов и псевдо-элементов. Я перечислил все возможные инструменты, а вы должны выбрать лишь самое нужное для себя.

    Преимущества оптимизации HTML за счёт CSS

    Суть всего написанного выше отчасти заключается в том, чтобы отказаться от повсеместного использования атрибутов class и id в HTML, тем самым возложив всё на плечи могучих таблиц стилей.

    Внешние файлы стилей, как и внешние файлы Javascript отлично кэшируются, а это значит, что зайдя первый раз на любую страницу вашего сайта, браузер пользователя запоминает эти файлы и более их не скачивает, в отличие от самой страницы сайта, то есть вашей HTML разметки, картинок и текста, которую браузер загружает снова и снова. Тоже самое касается и поисковых систем, им вообще нет дела до ваших внешних файлов, но вот до объёма и содержания вашей HTML разметки им дело есть. Поисковым системам приходится сканировать всю структуру страницы и в ваших же интересах помочь им в этом, сосредоточить их усилия на контенте, а не на громоздкой стене разметки состоящей из кучи классов и идентификаторов или того хуже – Javascript обработчиков событий и CSS стилей прямо в атрибутах тегов (и такое до сих пор бывает).

    Вы можете со мной поспорить, мол, мы можем заставить клиентский браузер скачивать себе в локальную среду все подключаемые файлы, картинки, закэшировать всю страницу целиком и так далее и тому подобное. На таком фоне подобная мелочь совсем теряется, но так или иначе максимально сократив HTML разметку, вы только выигрываете, при этом ничего не потеряв, кроме возможной привычки.

    Подытожим: благодаря оптимизации и сокращению HTML мы имеем совсем небольшой выигрыш в скорости загрузки сайта и в SEO (поисковой оптимизации), а также более чистый код.

    Про CSS

    Css-селекторы

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

    Селекторы делятся на несколько видов:

    • по типу ( H1 , TD , HR . );
    • универсальный селектор — * — обозначает элемент любого типа;
    • селекторы атрибутов ( [data-name] , [data-name$=»hidden»] );
    • селекторы по классу ( .main , .header__nav );
    • селекторы по ID ( #form , #submit );
    • псевдо-классы:
      • динамические ( :hover и т.д.);
      • селектор цели ( :target );
      • селектор по языку ( :lang(en) );
      • состояния элементов интерфейса ( :enabled , :checked . );
      • структурные псевдоклассы ( :root , :nth-child );
      • псевдокласс отрицания ( :not(P) ).
    • псевдоэлементы ( :before , :first-line );
    • комбинаторы ( DIV SPAN , P + H1 );

    Селекторы ниже сгруппированы по спецификациям. Это поможет нам понять какие из них работают везде (из CSS1), какие работают почти везде (из CSS2), а какие кое-где могут и не работать.

    Селекторы из CSS1

    Самые простые и хорошо всем знакомые:

    • обращение к элементу по тегу ( BODY , A , TABLE и т.д.);
    • по ID ( #main );
    • по классу ( .header-image );
    • обращение к потомку через родителя ( UL A , .sidebar .widget );
    • состояния ссылок A:link , A:visited , A:hover ;
    • псевдоэлемент для первой строки текста — P::first-line ;
    • псевдоэлемент для первого символа в тексте — P::first-letter .

    Селекторы из CSS2

    В этой спецификации добавилось много интересного:

    * — универсальный селектор. Например, * уберет отступы у всех элементов на странице.

    E[foo] — элементы с заданым атрибутом.

    выберет только абзацы, у которых есть атрибут data-content:

    E[foo=»bar»] — элементы, у которых атрибут имеет заданное значение.

    =»bar»] — элемент, который имеет атрибут со списком значений, разделенных пробелом, одно из которых равно заданному.

    E[foo|=»bar»] — элемент, который имеет атрибут со списком значений, разделенных дефисом, который начинается с заданного.

    E:first-child — псевдокласс, обращающийся к первому элементу из нескольких внутри родителя.

    Селектор выбирает первый элемент только если он соответствует заданному тегу или классу и только если он является самым первым потомком родителя.

    Для выбора первого элемента из списка дочерних элементов определенного типа существует другой селектор — :first-of-type , добавленный в CSS3.

    E:lang(fr) — выбирает элементы на заданном языке. Язык элемента может быть получен из HTTP-заголовков, отдаваемых сервером, из meta -тега, заданного в head , либо если у элемента задан атрибут lang

    Например, этот код добавит малиновый фон всем элементам, для которых язык определен как русский:

    E::before — генерируемый контент перед заданным элементом.

    E::after — генерируемый контент после элемента.

    E > F — выбирает элемент, только если он является прямым потомком родителя (ни во что больше не вложен).

    E + F — выбирает второй заданный элемент, который следует непосредственно после первого.

    Селекторы CSS3

    Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

    Дизайн лендинга

    Создавайте дизайн любых сайтов — для себя и на заказ!

    Популярное

    • Главная
    • ->
    • Материалы
    • ->
    • 30 CSS-селекторов, о которых полезно помнить

    Reg.ru: домены и хостинг

    Крупнейший регистратор и хостинг-провайдер в России.

    Более 2 миллионов доменных имен на обслуживании.

    Продвижение, почта для домена, решения для бизнеса.

    Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

    Бесплатный Курс «Практика HTML5 и CSS3»

    Освойте бесплатно пошаговый видеокурс

    по основам адаптивной верстки

    на HTML5 и CSS3 с полного нуля.

    Фреймворк Bootstrap: быстрая адаптивная вёрстка

    Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

    Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

    Верстайте на заказ и получайте деньги.

    Что нужно знать для создания PHP-сайтов?

    Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

    Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

    Создайте свой сайт за 3 часа и 30 минут.

    После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

    Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

    Изучите основы HTML и CSS менее чем за 4 часа.

    После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

    Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

    Бесплатный курс «Сайт на WordPress»

    Хотите освоить CMS WordPress?

    Получите уроки по дизайну и верстке сайта на WordPress.

    Научитесь работать с темами и нарезать макет.

    Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

    Хотите изучить JavaScript, но не знаете, как подступиться?

    После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

    Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

    *Наведите курсор мыши для приостановки прокрутки.

    30 CSS-селекторов, о которых полезно помнить

    Итак, Вы разобрались с основными селекторами: id, class, селекторами потомков. И все? Если да, то Вы теряете очень много в плане гибкости управления внешним видом элементов на странице.

    Несмотря на то, что многие из упомянутых здесь селекторов входят в спецификацию CSS3 и, соответственно, поддерживаются только современными браузерами, Вам все же следует ознакомиться с ними и держать их в памяти.

    1. *

    Начнем с простейших вещей для новичков, прежде чем перейдем к продвинутым селекторам.

    Символ звездочки позволяет выбрать все элементы на странице. Многие веб-разработчики используют это для «обнуления» всех внешних и внутренних отступов.

    Также символ * можно использовать для дочерних элементов объекта.

    Этот код нацелен на все элементы, которые являются дочерними по отношению к блоку с идентификатором container.

    Совместимость:

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    2. #X

    Символ решетки позволяет нам отбирать элементы по идентификатору. Это один из наиболее распространенных способов отбора элементов, однако будьте осторожны при его использовании.

    «Спросите себя: Мне точно необходимо использовать id для какого-то элемента, чтобы сослаться на него?»

    Селекторы id негибки и их трудно использовать повторно в разных проектах. Если возможно, пытайтесь сначала использовать имя тэга или даже псевдо-класс.

    Совместимость:

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    3. .X

    Это селектор класса. Разница между id и классами в том, что с помощью классов можно выбирать сразу несколько элементов. Используйте классы, если Вам нужно применить один стиль к группе элементов.

    В противном случае используйте id для нахождения «иголки в стоге сена» и применения стиля только к одному конкретному объекту.

    Совместимость:

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    4. X Y

    Следующий часто используемый тип селектора — селектор потомка. Его следует использовать, когда нужно производить более точечный отбор элементов.

    К примеру, как быть, если нужно выбрать не все тэги ссылок, а только те, что находятся внутри неупорядоченного списка? Это как раз тот случай, когда следует использовать селектор потомка.

    «Совет: Если Ваш селектор похож на X Y Z A B.error, то Вы, вероятно, что-то делаете на так. Всегда спрашивайте себя, действительно ли это самый простой способ»

    Совместимость:

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    5. X

    Что, если Вы хотите сослать на все элементы определенного типа на странице, если у них нет id или классов? Делайте проще, используйте селекторы типа. Если Вам нужно выбрать все неупорядоченные списки, используйте ul<>.

    Совместимость:

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    6. X:visited и X:link

    Здесь мы используем псевдо-класс :link для выбора всех ссылок, на которых еще не был совершен клик.

    Также есть псевдо-класс :visited, который, как Вы и ожидали, позволяет нам применить стиль только к тем ссылкам, по которым был совершен клик или переход.

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    7. X + Y

    Это так называемый смежный селектор. В этом случае каждый параграф следующий сразу после каждого элемента ul будет красного цвета.

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    8. X > Y

    Различие между X Y и X > Y в том, что последний выберет только прямых потомков. Рассмотрим следующий пример:

    Селектор #container > ul выберет только те элементы ul, которые являются прямыми потомками блока div с идентификатором container. Т.е. в данном случае этот селектор не отберет элемент ul, который является потомком первого элемента li.

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    Эта комбинация сестринских (сиблинговых) элементов похожа на X + Y, но она менее строгая. Если в случае ul + p будут выбраны только первые элементы p, следующие за ul (т.е. наблюдается смежность в выборе), то рассматриваемый нами сейчас селектор более общий.

    В нашем случае он отберет все элементы p, следующие за элементом ul.

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    10. X[title]

    Здесь мы обращаемся к атрибуту селектора. В нашем примере будут окрашены в зеленый цвет только ссылки, имеющие атрибут title.

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    11. X[href=»foo»]

    Код выше позволит придать стиль всем ссылкам, атрибут href у которых равен https://www.codeharmony.ru. Эти ссылки будут красного цвета. Остальные ссылки не получат данного стиля.

    Это работает хорошо, но это немного негибко. Что, если ссылка на самом деле ведет на Codeharmony.ru но, возможно, адрес указан, как codeharmony.ru а не https://www.codeharmony.ru? В таких случаях мы можем использовать основы регулярных выражений.

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    12. X[href*=»codeharmony»]

    Поехали дальше; это как раз то, что нам нужно. Звездочка означает, что искомое значение может находиться в любой части атрибута href. Таким образом, мы можем отобрать и https://www.codeharmony.ru и www.codeharmony.ru и codeharmony.ru.

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    13. X[href^=»http»]

    Вы когда-нибудь думали о том, как на некоторых сайтах рядом с ссылками, ведущими на другие сайты (внешние по отношению к текущему) проставлены небольшие иконки, которые дают знать об этом пользователю? Это отличные «напоминалки» пользователю о том, что ссылка ведет на другой сайт.

    Делается это с помощью символа ^ (карат). Он обычно используется в регулярных выражениях для обозначения начала строки. Если мы хотим отобрать ссылки, у которых атрибут href начинается с http, то мы можем использовать селектор из примера выше.

    «Обратите внимание, что мы не ищем https://. Это необязательно и, к тому же, не учитывает ссылки по протоколу https://.»

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    14. X[href$=».jpg»]

    И снова мы используем регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением .jpg. Разумеется, такой подход не будет работать для картинок с расширениями .gif, .png и т.д.

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    15. X[data-*=»foo»]

    Как же мы можем охватить различные типы картинок? Мы можем создать, например, несколько селекторов:

    Но это муторно и не элегантно. Другой вариант — это создать собственный атрибут data-filetype и добавить его к каждой ссылке, ведущей на картинку.

    Поступив таким образом, мы можем использовать код данного примера:

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    Вот еще один интересный трюк, о котором не все знают. Знак

    (тильда) позволяет нам выбирать атрибуты со значениями, разделенными пробелами, т.е.

    Используя данный прием мы можем делать выборки с нужными нам комбинациями:

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    17. X:checked

    Этот псевдо-класс отбирает те элементы, которые были отмечены, например, радиокнопку или чекбокс.

    Совместимость:

    * IE9+
    * Firefox
    * Chrome
    * Safari
    * Opera

    18. X:after

    Данный псевдо-класс позволяет сгенерировать контент вокруг выбранного элемента.

    Данный пример показывает, как с помощью псевдо-класса :after после блока с классом .clearfix создаётся пустая строка, после чего очищается. Хороший метод, когда невозможно применить overflow: hidden.

    Совместимость:

    * IE8+
    * Firefox
    * Chrome
    * Safari
    * Opera

    19. X:hover

    Это Вы точно знаете. Официальное название звучит вроде «псевдо-класс, основанный на действии пользователя». Звучит страшновато, хотя на деле все просто. Хотите применить к элементу определенный стиль, когда на него наводится курсор мыши? Это оно самое!

    «Помните, что старые версии IE не понимают этого псевдо-класса по отношению к чему-бы то ни было, кроме тэга а.»

    Часто данный прием используется для задания нижней границы для ссылок при наведении на них курсора:

    «Мега-чит: border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;»

    Совместимость:

    * IE6+ (в IE6 работает только по отношению к ссылкам)
    * Firefox
    * Chrome
    * Safari
    * Opera

    20. X:not(selector)

    Отрицание может быть также очень полезным. Предположим, я хочу выбрать все блоки div, кроме одного с идентификатором container. Для этого отлично подойдет код выше.

    Если же мне нужно выбрать все элементы, кроме тэгов параграфов, то можно написать так:

    Совместимость:

    * IE9+
    * Firefox
    * Chrome
    * Safari
    * Opera

    21. X::pseudoElement

    Псевдоэлементы можно использовать для придания стилей фрагменту элемента, например, первой строке или первой букве. Применяется только к блочным элементам.

    Выбираем первую букву параграфа:

    Этот кусок кода найдет все параграфы на странице и применит к первой букве каждого из них указанные стили. Часто это используется для создания эффекта «газетного заголовка».

    Выбираем первую строку параграфа:

    Аналогично предыдущему примеру, но в данном случае будет выбрана первая строка каждого параграфа.

    Совместимость:

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    22. X:nth-child(n)

    Помните времена, когда мы не имели возможности обратиться к конкретному порядковому элементу-потомку? Данный псевдо-класс решает эту проблему!

    В качестве параметра принимается целое число. Если нужно выбрать 2-й элемент списка, нужно использовать конструкцию: li:nth-child(2).

    Мы можем даже выбирать группы элементов-потомков. К примеру, чтобы выбрать каждый четвертый элемент списка, нужно использовать конструкцию: li:nth-child(4n).

    Совместимость:

    * IE9+
    * Firefox
    * Chrome
    * Safari

    23. X:nth-last-child(n)

    Что, если у Вас есть большой неупорядоченный список и Вам нужно, к примеру, выбрать третий элемент с конца. Вместо того, чтобы писать li:nth-child(397), Вы можете воспользоваться псевдо-классом nth-last-child.

    Совместимость:

    * IE9+
    * Firefox 3.5+
    * Chrome
    * Safari
    * Opera

    24. X:nth-of-type(n)

    Иногда бывают ситуации, когда вместо того, чтобы выбирать определенных потомков, нужно сделать выбор по типу элемента.

    Представьте, что на странице есть пять неупорядоченных списков. Если Вам нужно применить стили только к третьему списку, но у него нет уникального идентификатора и иных «зацепок», то можно воспользоваться псевдо-классом nth-of-type(n). В коде выше показан способ придания стиля только третьему неупорядоченному списку.

    Совместимость:

    * IE9+
    * Firefox 3.5+
    * Chrome
    * Safari

    25. X:nth-last-of-type(n)

    Да, для полноты картины есть и такой вариант. Так можно выбрать n-ный элемент определенного типа с конца.

    Совместимость:

    * IE9+
    * Firefox 3.5+
    * Chrome
    * Safari
    * Opera

    26. X:first-child

    Этот псевдо-класс позволяет выбрать только первого потомка родительского элемента. Часто используется для удаления границ первого и последнего элементов списка.

    К примеру, если у вас есть список рядов, каждый из которых имеет border-top и border-bottom, то последний и первый элементы списка будут немного выбиваться из общего строя.

    Для устранения этого недостатка можно использовать данный псевдо-класс.

    Совместимость:

    * IE7+
    * Firefox
    * Chrome

    Сайт на WordPress

    Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress

    CSS-селекторы в GTM. Часть I

    Если в Google Analytics одной из самых непростых тем для изучения по-праву считают регулярные выражения (из-за сложного восприятия и запоминания синтаксиса команд, метасимволов), то в этой, пожалуй, ей равнозначны именно css-селекторы, поскольку знания в данной области лежат далеко за пределами анализа статистики и построения отчетов.

    Но как только вы научитесь правильно использовать селекторы CSS в Google Tag Manager, то забудете о сторонней помощи программистов по многим задачам. Здесь больше именно веб-разработки, но без спецсимволов из регулярных выражений все равно не обошлось.

    В процессе настройки аналитики часто приходится отслеживать клики по определенным элементам на странице сайта. Все просто, если у отслеживаемых элементов (кнопки, ссылки, формы и т.д.) есть атрибуты id или class. Например, как здесь (инспектирование кода веб-страницы в консоли разработчика):

    Атрибуты id и class у элемента на сайте

    В Google Tag Manager для активации тега на данный элемент остается только настроить триггер со встроенными переменными Click Classes и Click ID.

    Пример условия активации триггера по Click ID

    Но часто бывает, что у необходимого элемента нет таких атрибутов. Тогда на помощь приходят css-селекторы.

    Селектор — это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применен стиль.

    CSS-селекторы применяются в Google Tag Manager для условий активации триггеров, а также в пользовательских переменных, таких как «Видимость элемента», «Элемент DOM» и «Собственный код JavaScript».

    CSS-селекторы в триггерах и переменных GTM

    Если атрибут нужного элемента не повторяется на странице, то рекомендуется использовать именно встроенные переменные. Но если один и тот же класс используется в нескольких элементах на странице, тогда рекомендуется использовать селекторы CSS.

    Как правило, большинство настроек с использованием селекторов CSS приходится на связку «соответствует селектору CSS» + Click Element или Form Element.

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

    Подробнее обо всех элементах HTML читайте в руководстве разработчиков Mozilla. Чаще всего бы будете встречаться с такими тегами, как

    Кроме этого, вы должны познакомиться с объектной моделью документа (Document Object Model, DOM). Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами.

    Прежде чем в Google Tag Manager настраивать триггеры на отслеживание прокрутки, взаимодействия пользователей с видео, электронную торговлю, вам необходимо понять, что из себя представляет дерево DOM.

    DOM определяет логическую структуру документа, способы доступа к элементам и их изменению. Документ может быть как HTML, так и XML. Когда DOM используется для определения логической структуры HTML-документа, значит речь идет о HTML DOM. Давайте рассмотрим пример:

    Представление DOM этого документа HTML выглядит следующим образом:

    Представление DOM для документа HTML

    Здесь html, head, body, title, meta, h2, p, table, tr, td, Google Tag Manager для googлят, Интернет-маркетинг и веб-аналитика, 2020 и т.д. являются примерами объектов DOM. Они также называются элементами или узлами. Нижние блоки с пометкой «Текст» являются текстовыми узлами.

    Чтобы отслеживать клики/события через GTM по определенным элементам на странице, необходимо понимать взаимосвязь между различными узлами документа.

    DOM нужен для того, чтобы манипулировать страницей – читать информацию из HTML, создавать и изменять элементы. Получив узел, мы можем что-то сделать с ним. Все узлы в документе имеют иерархическое отношение друг к другу. Существует несколько специальных терминов для описания отношений между узлами:

    • родительский узел (parent node) — родительским узлом по отношению к рассматриваемому объекту является узел, в который вложен рассматриваемый объект.

    На примере выше по отношению к узлам

    и элемент является родительским. Для узла родительским является узел .

      узлы-потомки (child node) — узлом-потомком по отношению к рассматриваемому объекту является узел, который вложен в рассматриваемый объект. На нашей схеме по отношению к узлу

    и являются потомками. Для узла потомками являются и атрибут meta.
    узлы-братья (sibling node) – узлы, находящиеся на одинаковом уровне вложенности по отношению к их родительскому узлу. На нашей схеме узлами-братьями являются и по отношению к корневому , а также ,

    и по отношению к родительскому узлу .

    Самый верхний узел в DOM называется корневым. Так как объект document не является частью DOM, в нашем примере корневым является . Он не имеет родителей и сам является родительским узлом по отношению к и .

    В интернете в различных материалах можно встретить разные термины – предок, потомок (прямой и непрямой), сыновья, дочери, дети, ребенок, братья, сестры, правнуки и т.д. По сути, это одно и тоже. То, как вы привыкнете их называть, не имеет значения. Главное – это правильно понимать взаимосвязь между ними и уметь к ним обращаться.

    Каждый объект HTML, кроме текстовых узлов, имеет свойства (атрибуты) и методы. Например:

    • — это элемент HTML;
    • href,class – атрибуты элемента ;
    • dataLayer.push() – это метод, который выполняется в ответ на событие onclick (возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick).

    Google Tag Manager по умолчанию отслеживает все основные элементы и атрибуты, но не отслеживает кастомные (пользовательские) атрибуты.

    Когда мы используем CSS-селекторы, мы находим элементы в DOM. для управления внешним видом HTML-документа существует формальный язык CSS. CSS это аббревиатура «Cascading Style Sheets» или «Каскадные Таблицы Стилей». Обычно CSS называют просто «стили». На текущий момент существует несколько спецификаций (CSS1, CSS2, CSS2.1, CSS3, CSS4). Последняя содержит незначительные изменения, и поэтому самой популярной и часто используемой на данный момент является CSS3.

    Как правило, все стили веб-сайта выносятся в отдельный файл с расширением .css, к которому впоследствии можно обратиться по определенному пути.

    Селекторы могут быть:

    • простыми (напрямую идентифицируют элемент или несколько элементов страницы на основании типа элемента (или его класса (class) или id.);
    • по атрибутам (позволяют искать элементы по их атрибутам attributes и значениям этих атрибутов. Делятся на две категории: селекторы наличия и значения атрибута и селекторы подстроки в значении атрибута);
    • псевдоселекторами (те, что выбирают только часть элемента или только элементы в определенном контексте. Бывают двух типов — псевдоклассы и псевдоэлементы);
    • комбинированными (селекторы и их взаимосвязи между друг другом выражаются посредством комбинаторов);

    Давайте рассмотрим каждый вид подробнее.

    Простые селекторы

    К ним относятся: селекторы классов (class selectors) и селекторы по ID.

    Селектор класса состоит из точки (.), за которой следует имя класса. Имя класса — это любое значение, не содержащее пробелов в HTML-атрибуте class.

    Пример селектора классов

    Пример .form_button. Это означает, что css-селектор . >

    Клик по элементам, соответствующим CSS-селектору класса .form_button

    ID-селектор состоит из символа решетки (#), за которым следует ID нужного элемента. Каждый элемент может иметь уникальный идентификатор, назначаемый атрибутом id.

    Пример селектора по ID

    Пример #maiLeaderboard. Это означает, что css-селектор # >

    Клик по элементам, соответствующим CSS-селектору c идентификатором #maiLeaderboard

    Для выбора всех элементов на странице существует универсальный селектор (*). Помните этот спецсимвол в регулярных выражениях? Там он соответствует 0 или более предыдущих элементов, а здесь служит для одновременного установления одного стиля для всех элементов веб-страницы. Например, чтобы задать шрифт или начертание текста.

    Рассмотрим пример, в котором нам необходимо отследить клик по любому блоку внутри блока

    Пример использования универсального селектора *

    Настроить в GTM триггер на клик по элементу с классом «block», используя встроенную переменную Click >

    По этой причине будем использовать универсальный селектор * для класса .block:

    Клик по элементам, соответствующим CSS-селектору класса .block и всех узлов-потомков с помощью универсального селектора *

    Такая запись означает, что необходимо отслеживать клик по всем узлам-потомкам элемента с классом «block».

    В CSS есть такое понятие, как «комбинаторы». Они позволяют объединить множество селекторов, что дает возможность выбирать элементы внутри других элементов, или смежные элементы

    Элемент

    Если необходимо выбрать все определенные элементы на страницы, используйте конструкцию «элемент».

    Клик по элементам, соответствующим CSS-селектору по div

    Триггер в GTM будет активироваться при выполнении события по всем элементам div на странице.

    Элемент, Элемент

    Если необходимо выбрать все элементы “div” и p, то используйте конструкцию «элемент, элемент».

    Клик по элементам, соответствующим CSS-селектору по div, p

    Триггер в GTM будет активироваться при выполнении события по всем элементам div и p на странице.

    Элемент Элемент

    Если необходимо выбрать элемент, вложенный в другой элемент, то используйте конструкцию «элемент элемент».

    Клик по элементам, соответствующим CSS-селектору div p

    Триггер в GTM будет активироваться при выполнении события по всем элементам p на странице внутри элементов div.

    Не обязательно должен быть «родительский узел» — «узел потомка», но необходимо, чтобы первый элемент был перед вторым.

    Элемент>Элемент

    Пример div>span. Конструкция «элемент>элемент» выбирает все дочерние элементы “span”, у которых родитель — элемент ”div”.

    Разберем это на конкретном примере:

    Пример конструкции «элемент>элемент»

    Добавляем в Google Tag Manager условие активации триггера:

    Клик по элементам, соответствующим CSS-селектору div>p

    Триггер в GTM будет активироваться при выполнении события по дочерним элементам p на странице внутри элемента div, то есть тех, которые на скриншоте выше выделены зеленым цветом и соответствуют строке «Мороз и солнце; день чудесный!».

    Элемент+Элемент

    Пример div+a. Конструкция «элемент+элемент» позволяет выбрать все элементы , которые расположены сразу после закрывающегося тега

    Конструкция «элемент+элемент» на примере div+a

    Таким образом, если мы зададим условие активации триггера в GTM по Click Element и соответствию селектору CSS div+a, то тег будет активироваться по событию на странице по тегу , который идет сразу после закрывающегося тега ”div” (выделено зеленым), игнорируя другие теги внутри “div” (выделены красным).

    Клик по элементам, соответствующим CSS-селектору div+a

    ol. Конструкция «элемент

    элемент» позволяет выбрать все элементы ol, которым предшествует элемент “p”.

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

    У элементов HTML есть атрибуты — это дополнительные значения, которые настраивают элементы или регулируют их поведение различным способом. Справочная информация по HTML атрибутам доступна по ссылке: https://developer.mozilla.org/ru/docs/Web/HTML/Attributes

    Существует особый вид селекторов, позволяющий искать элементы по их атрибутам и значениям. Для их записи используются квадратные скобки [].

    Селекторы наличия и значения атрибута

    Эти селекторы выделяют элементы на основе точного значения атрибута:

    • [атрибут] — выбирает все элементы с атрибутом ”атрибут”, вне зависимости от его значения;

    Пример [target] — выбирает все элементы на странице с атрибутом target.

    Примечание: по умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега .

    • [атрибут=”значение”] — выбирает все элементы с атрибутом “атрибут”, которое имеет значение “значение”.

    Пример [target=_blank] – выбирает все элементы с атрибутом target, который имеет значение “_blank.

    =”значение”] – выбирает все элементы с атрибутом “атрибут”, в значении которого (в любом месте) встречается «значение» в виде отдельного слова. Если говорить простыми словами, то является аналогом условия «содержит».

    Пример использования [атрибут

    ) в данном селекторе является ключом для осуществления выбора элемента на основании наличия в значении атрибута нужного слова, отделенного пробелом. Если тильда будет пропущена, то получится требование к точному значению.

    Селекторы подстроки в значении атрибута

    Селекторы по атрибутам этого типа еще называют «Селекторы типа регулярных выражений (RegExp-like selectors)», поскольку они предлагают способ проверки условий, подобно тому, как это делают регулярные выражения. Подробно о регулярных выражениях и примерах их использования написано в моей другой книге «Google Analytics для googлят: Практическое руководство по веб-аналитике (2020)».

    Селекторы типа регулярных выражений:

    • [атрибут|=”значение”] — выбирает все элементы с атрибутом “атрибут”, имеющие значение в точности равное “значение” или начинающееся с “значение-“ (обратите внимание, что символ | — это не ошибка, он нужен для работы с языковой кодировкой.)

    Значение может быть единственным словом в атрибуте, например, lang=»ru» или с добавлением других слов через дефис, например, lang=»ru-region».

    На примере ниже для “lang|=ru” задается стиль (color:green). Результатом будет измененный цвет текста у атрибута “ru” Привет! и “ru-region” Здравствуйте. (выделено зеленым), поскольку [атрибут|=”значение”] подразумевает «точное» значение или же «начинающееся с».

    Пример использования [атрибут|=”значение”]

    • [атрибут^=”значение”] — выбирает каждый элемент с атрибутом “атрибут”, значение которого начинается с “значение”.
    • [атрибут$=”значение”] — выбирает все элементы с атрибутом “атрибут”, значение которого заканчивается на “значение”.

    Пример использования [атрибут$=”значение”]

    • [атрибут*=”значение”] — выбирает все элементы с атрибутом “атрибут”, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) «значение».

    Проиллюстрируем это на следующем примере:

    Пример использования [атрибут*=”значение”]

    Псевдоклассы

    Псевдоклассы — это дополнения к обычным селекторам, которые делают их еще точнее и мощнее. Они определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши. Это реализуется с помощью псевдокласса :hover.

    Псевдокласс добавляется к селектору c помощью символа двоеточия : (селектор:псевдокласс).

    В Google Tag Manager псевдоклассы также можно применять для активации переключателей элементов интерфейса, например, checkbox и флажки (radio), или для отслеживания кликов по определенным элементам из выпадающего списка.

    Псевдокласс – это селектор, который используется для выбора того, что не может быть выбрано с помощью других селекторов или может быть выбрано, но достаточно трудным способом. Их существует большое количество, но на практике в GTM используются некоторые. Вот одни из самых популярных:

    • :checked, :selected, :disabled, :enabled — различные состояния элементов input;
    • :nth-child(n) — позволяет отследить определенный элемент списка. Например, “ul>li:nth-child(4)” позволяет отследить четвертый элемент;
    • :nth-last-child(n) — псевдокласс, противоположный предыдущему, который позволяет отследить определенный элемент списка, отчет элементов идет с конца. Например, селектор CSS “:nth-last-child(2)” вернет предпоследний элемент списка;
    • :not(селектор) — псевдокласс отрицания. Выбирает все элементы, кроме того элемента, что в скобках.

    Таблица псевдоклассов с примерам

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

    Помимо псевдоклассов, существуют еще и псевдоэлементы. Псевдоэлемент — это виртуальный элемент, который не существует в явном виде в дереве элементов документа. Они используются для выбора тех частей элемента, которые не могут быть выбраны с помощью других селекторов, а также для стилизации не всего элемента, а отдельных его частей.

    Таблица псевдоэлементов с примерами

    Рекомендую перейти на сайт w3schools.com и изучить два материала для лучшего понимания данной темы:

    CSS-селекторы: w3schools.com/cssref/css_selectors.asp

    Демонстрация селекторов: w3schools.com/cssref/trysel.asp

    По первой ссылке представлены все CSS-селекторы и псевдоклассы с примерами и описанием их работы (на английском языке). По второй вы можете наглядно увидеть, как работают различные селекторы.

    Демонстрация селекторов на сайте w3schools.com

    Выбрав в левой части экрана один из селекторов, справа вы увидите подсвеченный результат.

    Также для закрепления пройденного материала рекомендую прочитать статью «Основы CSS-селекторов на примере котиков» и несколько разделов из справки разработчиков developer.mozilla.org.

    Для того, чтобы правильно обращаться к элементам на странице и применять их в Google Tag Manager для отслеживания определенных событий, нужно просто глубже разобраться в теме CSS-селекторов, понять их взаимосвязь друг с другом и использовать инструменты, которые упрощают их обнаружение.

    Разберем три варианта определения CSS-селекторов.

    Консоль разработчика

    Традиционный способ, с помощью консоли разработчика любого браузера. Я пользуюсь Google Chrome, поэтому разберем пример на нем. Выбрав отслеживаемый элемент на странице, нажмите на него правой кнопкой мыши и «Просмотреть код».

    Правой кнопкой мыши – Просмотреть код

    После того, как мы удостоверились, что выбрали нужный элемент, в открывшемся коде страницы еще раз нажимаем правой кнопкой мыши по нужному элементу. Далее «Copy» — «Copy selector».

    Правой кнопкой мыши – Copy – Copy selector

    В буфер обмена у вас скопировался селектор. Можно вставить его в любой текстовый документ и посмотрть как он будет выглядеть. В моем примере он выглядит так: #home > div > div > div > div > div > a.button.hp-button-1.slide-button.w-button.green.fancybox

    Получилась очень длинная цепочка взаимосвязей элементов друг с другом. Несмотря на это его можно использовать в Google Tag Manager для настройки отслеживания события. Однако тот же селектор можно записать и в таком виде: a.button.hp-button-1.slide-button.w-button.green.fancybox, просто убрав общую часть в начале.

    CSS Selector Tester

    Чтобы проверить правильность выбора определенного элемента для настройки триггера и его отладки в GTM, можно воспользоваться специальным расширением для браузера Google Chrome, которое называется CSS Selector Tester. Скачать его можно по ссылке.

    Расширение для браузера CSS Selector Tester

    После установки в правом верхнем углу у вас должен отобразиться новый значок. Перейдите на необходимую страницу где хотите найти селектор и нажмите на иконку:

    Иконка CSS Selector Tester

    У вас откроется дополнительное окно со строкой ввода селектора. Просто вставьте ваш селектор, и он подсветится на странице. В качестве примера я добавлю a.button.hp-button-1.slide-button.w-button.green.fancybox – укороченную версию селектора, который мы определили с помощью консоли разработчика.

    Поиск селектора на странице

    CSS Selector Tester нашел такой элемент на странице и выделил его границы красной пунктирной линией. Вот так он выделил все элементы div на странице:

    Элементы div на странице

    Если бы мы ввели неверный селектор, то сообщение было бы «undefined» (не определено) и элемент не был бы найден на странице.

    SelectorGadget

    Для тех, кто не хочет лазать в консоль разработчика, инспектировать там элементы страницы и копировать конечный вариант селектора, может воспользоваться еще одним расширениям для браузера Google Chrome «SelectorGadget».

    Он позволяет легко определять селекторы CSS (при наведении на элемент в отдельном поле показывает его значение) и для наглядности выделяет выбранный элемент зеленым, а схожие – желтым.

    Пример работы расширения SelectorGadget

    Скачать расширение SelectorGadget можно по ссылке. После установки в правом верхнем углу у вас должен отобразиться новый значок.

    Понравилась статья? Подписывайтесь на социальные сети:

    Я также оказываю помощь в настройке контекстной рекламы и веб-аналитики. Подробнее здесь.

    CSS — Селекторы

    На этом уроке мы изучим основные виды селекторов, и научимся их использовать на практике.

    Что такое CSS селекторы?

    Селекторы — это один из фундаментальных механизмов CSS. Именно они определяют то, к каким элементам будут применены стили, указанные в фигурных скобках.

    Пример CSS правила:

    В этом CSS правиле, p — это селектор , в данном случае — это селектор элемента . Это CSS правило устанавливает стили (CSS свойства, описанные в нём) для всех элементов p на странице.

    В CSS очень много различных типов селекторов. Используя один из них или комбинацию из нескольких можно очень точно применить стили к нужным элементам.

    Базовые селекторы

    К базовым селекторам можно отнести селектор по классу, тегу, идентификатору, атрибуту и универсальный селектор.

    Селектор по элементу (тегу)

    Селектор по элементу предназначен для выбора элементов по имени тега.

    Пример задания правила для всех элементов p на странице:

    Селектор по классу

    Селектор по классу предназначен для выбора элементов по классу (значению атрибута class ).

    Пример задания правила для всех элементов, имеющих класс center :

    Селектор по идентификатору (id)

    Селектор по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута id ).

    Пример задания правила для элемента, имеющего в качестве значения атрибута id значение footer :

    Универсальный селектор

    Универсальный селектор (селектор звёздочка) предназначен для выбора всех элементов.

    Пример задания правила для всех элементов на странице:

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

    Селекторы по атрибуту предназначены для выбора элементов по имени атрибута и (или) его значению.

    Типы селекторов по атрибуту:

    • [attr] – по имени атрибута;
    • [attr=value] – по имени и значению атрибута;
    • [attr^=value] – по имени и значению, с которого оно должно начинаться;
    • [attr|=value] – по имени атрибута и его значению, которое равно value или начинается со value- ;
    • [attr$=value] – по имени атрибута и значению, на которое оно должно заканчиваться;
    • [attr*=value] – по указанному атрибуту и значению, которое должно содержать value ;
    • [attr

    =value] – по имени атрибута и значению, которое содержит value отделённое от других с помощью пробела.

    Пример задания правила для всех элементов на странице, имеющих атрибут target :

    [attr=value]

    Пример задания правила для всех элементов на странице, имеющих атрибут rel со значением nofollow :

    [attr^=value]

    Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого начинается с col :

    [attr|=value]

    Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого равно test или начинается с test- (т.е. с обязательным дефисом, после которого идёт остальное содержимое значения):

    [attr$=value]

    Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого заканчивается на color :

    [attr*=value]

    Пример задания правила для всех элементов на странице, имеющих атрибут href , значение которого содержит подстроку youtu.be (например будет выбран элемент, если атрибут href у него равен https://youtu.be/TEOSuiNfUMA ):

    Пример задания правила для всех элементов на странице, имеющих атрибут data-content , значение которого содержит news , отделённое от других с помощью пробела (например будет выбран элемент, если у него атрибут data-content равен hot-news news news-football ):

    Псевдоклассы

    Псевдоклассы предназначены для более точного выбора элементов в зависимости от их динамического состояния или расположения. С помощью них можно, например, установить стили элементу при поднесении к нему курсора или стилизовать элемент в зависимости от того какой он имеет порядковый номер.

    Псевдоклассы — это дополнение к основному селектору, которое позволяет выбрать элемент в зависимости от его особого состояния. Добавляется он к селектору c помощью символа : , т.е. так селектор:псевдокласс .

    Псевдоклассы для выбора элементов в зависимости от их состояния

    К этой группе псевдоклассов можно отнести псевдоклассы: :link , :visited , :hover , :active и :focus .

    Псевдоклассы :link и :visited предназначены исключительно для ссылок (элементов a с атрибутом href ).

    Псевдоклассы :hover , :active и :focus могут применяться не только к ссылкам, но и к другим элементам.

    Псевдокласс :link

    Псевдокласс :link предназначен для выбора не посещённых ссылок.

    Пример задания правила для всех элементов a с классом external , которые пользователь ещё не посетил:

    Псевдокласс :visited

    Псевдокласс :visited предназначен для выбора посещённых ссылок.

    Пример задания правила для всех элементов a , расположенных в .aside , пользователь которые уже посетил:

    Псевдокласс :active

    Псевдокласс :active предназначен для выбора элементов в момент когда они активируются пользователем. Например, когда пользователь нажал левой кнопкой мышкой на ссылку, но её ещё не отпустил. В основном данный класс применяется для ссылок ( a ) и кнопок ( button ), но может также использоваться и для других элементов.

    Пример задания CSS правила для всех элементов a когда они активируются пользователем:

    Псевдокласс :hover

    Псевдокласс :hover предназначен для выбора элементов при поднесении к ним курсора (при наведении на них).

    Пример задания CSS правила для всех элементов .btn-warning при поднесении к ним курсора:

    При задании CSS-правил для ссылок с использованием псведоклассов :link , :visited , :hover и :active , их следует распологать в следеующем порядке:

    Если CSS-правила расположить в другом порядке, то часть из них могут не работать.

    Псевдокласс :focus

    Предназначен для выбора элемента, который в данный момент находится в фокусе. Например, данное состояние может активироваться когда мы кликаем мышью в текстовое поле или переходим в него с помощью клавиши tab на клавиатуре.

    Пример задания CSS правила для элемента input[type=»text»] при нахождении его в фокусе:

    По расположению среди соседей

    При выборе элементов можно дополнительно с помощью псевдоклассов задать условие (фильтр) по их расположению (порядковому номеру) в родителе.

    Псевдоклассы, предназначенные для этого: :first-child , :last-child , :only-child , :nth-child(выражение) , :nth-last-child(выражение) .

    Псевдокласс :first-child

    Псевдокласс :first-child применяется для выбора элементов, которые являются первыми дочерними элементами своего родителя.

    Пример задания CSS правила для элементов li являющимися первыми дочерними элементами своего родителя:

    Псевдокласс :last-child

    Псевдокласс :last-child применяется для выбора элементов, которые являются последними дочерними элементами своего родителя.

    Пример задания CSS правила для элементов .alert-warning , которые являются последними дочерними элементами своего родителя:

    Псевдокласс :only-child

    Псевдокласс :only-child используется для выбора элементов, если они являются единственными дочерними элементами внутри родительского контейнера.

    Селектор h2:only-child выберет все элементы h2 , если они являются единственными дочерними элементами своего родителя.

    Действие аналогичное :only-child можно выполнить с помощью псевдоклассов :first-child и :last-child . Например селектор h2:only-child можно ещё реализовать так: h2:last-child:first-child .

    Псевдокласс :nth-child(выражение)

    Псевдокласс :nth-child() применяется для выбора элементов по их порядковому номеру в родителе. В качестве выражения можно использовать число, формулу или ключевые слова odd или even . Отсчёт элементов в родителе начинается с 1.

    Формула имеет следующую запись: An + B . A и B — это числа, а n — счетчик, принимающий целые значения, начиная с 0 (т.е. 0, 1, 2, 3 . ).

    Например, формула вида 3n + 2 будет определять элементы с порядковыми номерами (2, 5, 8, . ). Т.е. 3 * 0 + 2 , 3 * 1 + 2 , 3 * 2 + 2 , .

    А например, формула вида 5n будет определять элементы с порядковыми номерами (0, 5, 10, . ). Т.е. 5 * 0 , 5 * 1 , 5 * 2 , .

    Псевдокласс :nth-last-child(выражение)

    Псевдокласс :nth-last-child() выполняет те же действия что и :nth-child() за исключением того, что отсчет элементов в родителе вёдется не с начала, а с конца. В псведоклассе :nth-last-child(выражение) в качестве выражения можно использовать те же вещи, т.е. число, формулу, или ключевые слова odd или even

    По расположению среди соседей с учётом типа элемента

    В CSS имеются псевдоклассы аналогичные :first-child , :last-child и т.д. Они отличаются от них только тем, что выполняют это с учётом типа элемента.

    Список псевдоклассов, предназначенных для этого: :first-of-type , :last-of-type , :only-of-type , :nth-of-type(выражение) , :nth-last-of-type(выражение) .

    Псевдокласс :first-of-type

    Данный псевдокласс очень похож на :first-child , но в отличие от него он выбирает не просто первый элемент, а первый элемент своего родителя с учётом его типа .

    Например, выберем все элементы p , которые являются первыми элементами указанного типа у своего родителя:

    При использовании селектора p:first-child , не один элемент p не был выбран, т.к. не один из них не является первым дочерним элементом своего родителя.

    Псевдокласс :last-of-type

    Данный псевдокласс предназначен для выбора элементов, которые являются последними дочерними элементами данного типа своего родителя.

    Псевдокласс :only-of-type

    Псевдокласс :only-of-type применяется для выбора элементов, если каждый из них являются единственным дочерним элементом данного типа внутри своего родителя. В отличие от :only-child псведокласс :only-of-type работает аналогично, но с учётом типом элемента.

    В этом примере стили будут применены к элементам p , которые являются единственным элементом p внутри своего родителя.

    Псевдокласс :nth-of-type(выражение)

    Данный псевдокласс предназначен для выбора элементов по их порядковому номеру в родителе с учетом их типа.

    Псевдокласс :nth-of-type(выражение) похож на :nth-child(выражение) с разницей лишь а том, что он учитывает тип элемента. В качестве выражения также можно использовать число, формулу или ключевые слова odd или even . Отсчёт элементов в родителе начинается с 1.

    Селектор p:nth-child(2) выберет второй по счёту элемент, если он является p , а селектор p:nth-of-type(2) веберет второй дочерний элемент p среди дочерних p .

    Псевдокласс :nth-last-of-type(выражение)

    Псевдокласс :nth-last-of-type(выражение) аналогичен классу :nth-of-type(выражение) с разницей в том, что отсчёт дочерних элементов ведётся с конца.

    Псевдоклассы для элементов форм

    К этой группе можно отнести псевдоклассы :enabled , :disabled и :checked .

    Псевдоклассы этой группы, а также :hover , :active и :focus ещё называют событийными селекторами, т.к. они позволяют применить стили при наступлении определённых событий.

    Псевдокласс :checked

    Псевдокласс :checked предназначен для выбора элементов radio , checkbox и option внутри select , которые находятся во включенном состоянии.

    В этом примере фон элемента label при отмеченном checkbox выделяется цветом. Выбор включенного чекбокса выполняется с помощью псевдокласса :checked .

    Псевдокласс :enabled

    Псевдокласс :enabled предназначен для выбора включенных элементов формы, с которыми пользователь может взаимодействовать, например, нажать на него или внести текст.

    Пример, в котором установим для всех включенных элементов input фон:

    Псевдокласс :disabled

    Элементы формы могут кроме включенного состояния находиться ещё в отключенном.

    Псевдокласс :disabled предназначен для выбора отключенных элементов формы, т.е. элементов с которыми пользователь в данный момент не может взаимодействовать.

    Например, выберем все отключенные элементы input :

    Остальные псевдоклассы

    Псевдокласс :not(селектор)

    Псевдокласс :not() предназначен для выбора элементов, которые не содержат указанный селектор.

    В качестве селектора можно указывать селекторы по тегам, классам, атрибутам, использовать псевдоклассы, т.е. всё кроме псведокласса :not() , несколько сгруппированных селекторов, псевдоэлементы, дочерние и вложенные селекторы:

    При необходимости можно использовать несколько псевдоклассов :not() .

    Пример CSS селектора для выбора элементов, которые не содержат некоторый класс:

    Псевдокласс :empty

    Псевдокласс :empty предназначен для выбора пустых элементов (т.е. элементов, у которых нет дочерних узлов, в том числе текстовых).

    Селектор div:empty выберет все пустые элементы div на странице.

    Псевдокласс :root

    Псевдокласс :root предназначен для выбора корневого элемента документа. В HTML документе данным элементом является . В отличие от селектора по тегу html данный псевдокласс имеет более высокий приоритет.

    Применять :root можно например для объявления CSS переменных:

    Псевдокласс :target

    Псевдокласс :target предназначен для выбора элемента, идентификатор которого соответствует хэшу в URL-адресе.

    В этом примере стили будут применены к элементу с , если хэш URL страницы будет равен #header-1 . Если же хэш будет равен #header-2 , то псевдокласс :target соответственно выберет элемент с и стили уже будут применены к нему.

    Группировка селекторов

    Для задания правил нескольким селекторам одновременно их необходимо перечислить через запятую.

    Синтаксис: селектор1, селектор2, .

    Пример задания правила для всех элементов h3 и h4 на странице:

    Комбинирование селекторов

    В CSS селекторы можно комбинировать. Осуществляется это очень просто, посредством последовательного их записывания, без использования пробела.

    Пример селектора для выбора элементов, которые имеют одновременно два класса:

    Пример селектора для выбора элементов, которые имеют указанный класс, атрибут, и является первым дочерним элементом в своём родителе:

    Селекторы отношений

    В HTML документе каждый элемент всегда связан с другими элементами.

    Виды отношений между HTML элементами:

    • родитель – элемент, непосредственно в котором находится рассматриваемый элемент;
    • предок – это элемент, который расположен на одном из уровней иерархии элементов, до которого можно дойти двигаясь от рассматриваемого элемента к его родителю, от его родителя к родителю его родителя и т.д.
    • дети – это элементы, непосредственно расположенные в текущем рассматриваемом элементе;
    • потомки (дочерние элементы) – это любые элементы, которые находятся в текущем элементе вне зависимости от уровня иерархии, в котором они расположены;
    • соседи (сиблинги) – это элементы, расположенные на том же уровне вложенности (иерархии), что и рассматриваемый элемент; или другими словами — это все другие элементы, которые имеют того же родителя что и текущий рассматриваемый элемент.

    Более наглядно про отношения элементов приведено на рисунке. На этом рисунке отношения рассмотрены относительно элемента выделенного синим цветом.

    В CSS имеется 4 вида селекторов отношений.

    Первые два из них X Y и X > Y относятся к вложенным селекторам. Они предназначены для поиска элементов в зависимости от их нахождения внутри других.

    Остальные два X + Y и X

    Y являются CSS селекторами для выбора соседних элементов.

    Эти селекторы называют составными или комбинацией селекторов. Так как они на самом деле состоят из нескольких селекторов, разделённых между собой с помощью специальных символов (комбинаторов). Всего различают 4 символа: пробел, знак > (больше), знак + и

    Селектор X Y (для выбора вложенных или дочерних элементов)

    Селектор X Y (предок потомки) предназначен для выбора элементов Y , находящихся в X .

    Другими словами, селектор X Y предназначен для выбора элементов Y , являющихся потомками элементов определяемым селектором X .

    Селекторы X Y называют контекстными или вложенными.

    Например, селектор дочерних элементов div p выберет все элементы p , расположенные в div .

    Селектор X > Y

    Селектор X > Y (родитель > дети) предназначен для выбора элементов, определяемым селектором Y непосредственно расположенных в элементе, определяемым селектором X .

    По другому можно сказать, что селектор X > Y предназначен для выбора Y , у которых родителем является элемент, определяемым X .

    Например, комбинация селекторов li > ul выберет все элементы ul , которые непосредственно расположены в li .

    Селектор X + Y

    Селектор X + Y предназначен для выбора элементов Y , каждый из которых расположен сразу же после X . Элементы определяемым селектором X и Y должны находиться на одном уровне вложенности, т.е. быть по отношению друг к другу соседями (сиблингами).

    Например, комбинация селекторов input + label выберет все элементы label , которые расположены сразу же за элементом input , и являющиеся друг по отношению к другу соседями (сиблингами).

    Селектор X

    Y предназначен для выбора элементов Y , которые расположены после X . При этом элементы, определяемые селектором X и Y , должны являться по отношению друг к другу соседями (сиблингами).

    span выберет все элементы span , расположенные после элемента p на том же уровне вложенности.

    Приоритет селекторов

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

    Специфичность селекторов удобно представлять в виде 4 чисел: 0,0,0,0 .

    При этом сравнение селекторов по весу нужно выполнять слева направо. Если первая цифра одного селектора больше, чем у другого, то он является более специфичным и к элементу будет применяться CSS-свойство, заданное в нём. Если цифры равны, то выполняем сравнение следующих цифр селекторов и т.д.

    Если у сравниваемых селекторов все цифры равны, то будет применяться тот, который ниже из них расположен по коду.

    Как считать эти цифры? Каждый селектор в зависимости от типа имеет вес:

    • универсальный селектор (не добавляет вес) – 0,0,0,0 ;
    • селекторы по тегу, псевдоэлемент добавляют единичку к четвёртой цифре – 0,0,0,1 ;
    • селекторы по классу и по атрибуту, псевдоклассы добавляют единичку ко третьей цифре – 0,0,1,0 ;
    • селектор по идентификатору добавляют единичку ко второй цифре – 0,1,0,0 ;

    Стили, расположенные в атрибуте style элемента, являются более специфичными по сравнению с селекторами. Вес этих стилей определяется единицей в первой цифре – 1,0,0,0 .

    • * – 0,0,0,0 ;
    • li – 0,0,0,1 ;
    • li::before – 0,0,0,2 ;
    • ul > li – 0,0,0,2 ;
    • div input+label – 0,0,0,3 ;
    • h1 + div[data-target] – 0,0,1,2 ;
    • .btn.show – 0,0,2,0 ;
    • ul li a.item – 0,0,1,3 ;
    • #aside div.show – 0,1,1,1 ;
    • style=». » – 1,0,0,0 ;

    Повысить важность определённого CSS свойства можно с помощью ключевого слова !important . В этом случае будет использоваться именно данное CSS-свойство.

    В этом примере элементу будет установлен тот фон к которому добавлено слово !important . !important перебивает любой вес.

    Интересный случай, когда нужно определить какое значение CSS-свойства будет применено к элементу, если !important добавлено к нескольким из них.

    В этом случае будет применено то значение CSS-свойства c !important у которого больше вес селектора.

    К примеру, если добавить !important к CSS-свойству расположенному в style , то получим максимальную возможную специфичность, которую уже никак не перебьёшь.

    В этом примере к элементу #message будет применено CSS-свойство font-size со значением 20px, т.к. хоть у каждого из них имеется состояние !importants , но специфичность style ( 1,0,0,0 ) больше чем у селектора p#message ( 0,1,0,1 ).

    Каких селекторов нет в CSS?

    В CSS нет селектора для получения родительского элемента. Этот селектор может появиться в новой спецификации CSS, но в CSS3 так выбрать элемент нельзя.

    Комплексные селекторы

    Селекторы являются одной, если не самой важной частью CSS. Они формируют каскад и определяют, как стили должны применяться к элементам страницы.

    До недавнего времени внимание CSS никогда действительно не обращалось на селекторы. Время от времени появлялись небольшие обновления в пределах спецификации селекторов, но никогда не было никаких реальных новаторских улучшений. К счастью, в последнее время всё больше внимания уделяется селекторам, так что взглянем на то, как выбирать разные типы элементов и элементы в разных состояниях.

    CSS3 принёс новые селекторы, открывая целый новый мир возможностей и улучшений существующей практики. Здесь мы обсудим селекторы, как старые так и новые, а также как наилучшим образом их использовать.

    Типовые селекторы

    Перед глубоким погружением в некоторые более сложные селекторы и те, которые предлагаются в CSS3, давайте взглянем на некоторые наиболее типовые селекторы на сегодня. Эти селекторы включают в себя селекторы типа, классы и идентификаторы.

    Селектор типа идентифицирует элемент, основанный на его типе, в частности, как этот элемент объявлен в HTML. Селектор класса идентифицирует элемент, основанный на значении атрибута class , который может повторно применяться к нескольким элементам по мере необходимости и помогает делиться популярными стилями. И, наконец, идентификатор определяет элемент, основанный на значении атрибута id , который является уникальным и должен быть использован на странице только один раз.

    , не будут иметь никакого эффекта этого правила.
    Обзор типовых селекторов

    Пример Название Описание
    h1 Селектор типа Выбирает элемент по его типу.
    .tagline Класс Выбирает элемент по значению атрибута class , который может быть использован повторно несколько раз на одной странице.
    #intro Идентификатор Выбирает элемент по значению атрибута id , который является уникальным и должен использоваться только один раз на странице.

    Дочерние селекторы

    Дочерние селекторы обеспечивают способ выбора элементов, которые находятся один в другом, что делает их детьми своего родительского элемента. Такой выбор может быть сделан двумя разными способами, с помощью селектора потомка либо прямого дочернего селектора.

    Селектор потомка

    Наиболее распространённым дочерним селектором является селектор потомка, который соответствует каждому элементу, который следует за определённым предком. Потомок не обязательно должен идти сразу после предка в дереве документа, вроде отношения родитель-ребёнок, но может находиться в любом месте внутри предка. Селекторы потомка создаются пробелом между отдельными элементами в селекторе, создавая новый уровень иерархии для каждого элемента списка.

    Селектор article h2 является селектором потомка и выбирает только элементы

    , которые находятся внутри элемента . Обратите внимание, независимо от того, где живёт элемент

    , пока он находится внутри элемента , он всегда будет выбран. Кроме того, любой элемент

    за пределами элемента не будет выбран.

    Ниже приведены заголовки, из которых выбраны строки 3 и 5.

    Прямой дочерний селектор

    Порой селекторы потомка заходят слишком далеко, выбирая больше, чем хотелось бы. Иногда должны быть выбраны только прямые дети родительского элемента, а не каждый экземпляр элемента вложенный глубоко внутри предка. В этом случае может быть использован прямой дочерний селектор путём размещения знака больше (>) между родительским и дочерним элементом в селекторе.

    Например, article > p является прямым дочерним селектором только когда элементы

    Ниже, абзац на строке 3, является единственным прямым потомком его родителя , поэтому и выбран.

    Обзор дочерних селекторов

    Пример Название Описание
    article h2 Селектор потомка Выбирает элемент, который находится в любом месте внутри определённого предка.
    article > p Прямой дочерний селектор Выбирает элемент, который находится непосредственно внутри определённого родителя.

    Родственные селекторы

    Знать, как выбрать дочерние элементы, в значительной степени полезно и встречается довольно часто. Однако родственные элементы, т. е. элементы, у которых общий предок, также может потребоваться выбрать. Такая выборка может быть сделана с помощью общего родственного селектора и соседних селекторов.

    Общий родственный селектор

    Общий родственный селектор позволяет выбрать элементы, которые будут отобраны на основе их родственных элементов, т. е. те, у которых один и тот же общий родитель. Они создаются с помощью символа тильды (

    ) между двумя элементами внутри селектора. Первый элемент определяет, что второй элемент должен быть родственным с ним, и у обоих должен быть один и тот же родитель.

    p — это общий родственный селектор, он ищет элементы

    , которые следуют после любых элементов

    в том же родителе. Чтобы элемент

    был выбран, он должен идти после любого элемента

    Абзацы в строках 5 и 9 выбраны, поскольку они идут после заголовка в дереве документа и у них тот же родитель, что и у родственного заголовка.

    Соседние селекторы

    Иногда может быть желательно иметь немного больше контроля, в том числе возможность выбрать родственный элемент, который следует непосредственно за другим родственным элементом. Соседний селектор будет выбирать только родственные элементы, непосредственно следующие за другим родственным элементом. Вместо символа тильды, как в случае с общим родственным селектором, соседний селектор использует символ плюс (+) между двумя элементами в селекторе. Опять же, первый элемент определяет, что второй элемент должен непосредственно следовать после него и быть ему родственным и у обоих элементов должен быть один и тот же родитель.

    Взглянем на соседний селектор h2 + p . Будут выбраны только элементы

    идущие непосредственно после элементов

    . У обоих также должен быть один и тот же родительский элемент.

    Абзац на строке 5 выбирается, так как непосредственно следует после его родственного заголовка и у них один общий родительский элемент.

    Пример соседних селекторов

    Обзор родственных селекторов

    Пример Название Описание
    h2

    p Общий родственный селектор Выбирает элемент, который следует в любом месте после предыдущего элемента, и оба элемента имеют одного общего предка. h2 + p Соседний селектор Выбирает элемент, который следует непосредственно после предыдущего элемента, и оба элемента имеют одного общего предка.

    Селекторы атрибутов

    Некоторые рассмотренные ранее типовые селекторы также могут быть определены как селекторы атрибутов, в котором элемент выбирается на основе значения class или id . Эти селекторы атрибутов class и id широко используются и довольно мощные, но это лишь начало. Другие селекторы атрибутов появились в последние годы, в частности, сделали большой скачок вперед вместе с CSS3. Теперь элементы могут быть выбраны на основе того, присутствует ли атрибут и какое значение он содержит.

    Селектор наличия атрибута

    Первый селектор атрибута определяет элемент на основе того, включен ли этот атрибут или нет, независимо от его фактического значения. Чтобы выбрать элемент основываясь на том, присутствует атрибут или нет, просто включите имя атрибута в квадратных скобках ([]) в селекторе. Квадратные скобки могут идти после любого селектора типа или класса, в зависимости от желаемого уровня специфичности.

    Селектор атрибута =

    Для идентификации элемента с определённым и точно заданным значением может быть использован тот же селектор что и раньше, однако на этот раз внутри квадратных скобок после имени атрибута включают желаемое значение. Внутри квадратных скобок должно быть имя атрибута идущее после знака равно (=), где внутри кавычек и пишется желаемое значение атрибута.

    Селектор атрибута *=

    Когда мы пытаемся найти элемент на основе части значения атрибута, но не точного совпадения, может быть использован символ звёздочки (*) в квадратных скобках селектора. Звёздочка должна идти сразу после имени атрибута, непосредственно перед знаком равенства. Это означает, что следующее за ним значение только должно появиться или содержаться в значении атрибута.

    Селектор атрибута ^=

    В дополнение к выбору элемента на основе того, что значение атрибута содержит указанный текст, можно также выбрать элемент, основанный на том, с чего начинается значение атрибута. Использование символа циркумфлекса (^) в квадратных скобках селектора между именем атрибута и знаком равенства означает, что значение атрибута должно начинаться с указанного текста.

    Селектор атрибута $=

    Противоположностью предыдущего селектора является селектор атрибутов, где значение оканчивается определённым текстом. Вместо использования символа ^ применяется знак доллара ($) в квадратных скобках селектора между именем атрибута и знаком равенства. Использование знака доллара означает, что значение атрибута должно заканчиваться указанным текстом.

    Селектор атрибута

    Иногда значения атрибутов могут быть расположены через пробел друг от друга, в которых только одно из слов должно подходить для создания выборки. В этом случае использование символа тильды (

    ) в квадратных скобках селектора между именем атрибута и знаком равенства означает значение атрибута разделённое пробелами, из которых одно слово точно соответствует указанному значению.

    Селектор атрибута |=

    Когда значение атрибута разделено дефисом, а не пробелами, может быть использован символ вертикальной линии (|) в квадратных скобках селектора между именем атрибута и знаком равенства. Вертикальная линия означает, что значение атрибута может быть разделено дефисом, однако слова должны начинаться с указанного значения.

    Пример селекторов атрибутов

    Обзор селекторов атрибутов

    Пример Название Описание
    a[target] Селектор наличия атрибута Выбирает элемент если данный атрибут присутствует.
    a[href=»https://google.com/»] Селектор атрибута = Выбирает элемент, если значение данного атрибута в точности соответствует указанному.
    a[href*=»login»] Селектор атрибута *= Выбирает элемент, если значение данного атрибута содержит по крайней мере один экземпляр указанного текста.
    a[href^=»https://»] Селектор атрибута ^= Выбирает элемент, если значение данного атрибута начинается с указанного текста.
    a[href$=».pdf»] Селектор атрибута $= Выбирает элемент, если значение данного атрибута заканчивается указанным текстом.
    a[rel

    =»tag»] Селектор атрибута

    = Выбирает элемент, если значение данного атрибута разделено пробелами и точно совпадает с одним указанным словом. a[lang|=»en»] Селектор атрибута |= Выбирает элемент, если значение данного атрибута разделено дефисом и начинается с указанного слова.

    Псевдоклассы

    Псевдоклассы похожи на обычные классы в HTML, однако они непосредственно не указаны в разметке, вместо этого они поселяются динамически как результат действий пользователя или структуры документа. Наиболее распространённый псевдокласс, и его вы, вероятно, видели раньше, это :hover. Обратите внимание, что этот псевдокласс начинается с двоеточия (:), как и все остальные псевдоклассы.

    Псевдоклассы ссылок

    Некоторые основные псевдоклассы включают в себя два псевдокласса, вращающихся вокруг ссылок. Это псевдоклассы :link и :visited и они определяют, что ссылка была или не была посещена. Чтобы задать стиль ссылки, которая ещё не была посещена, в игру вступает псевдокласс :link , а псевдокласс :visited задаёт стиль ссылок, которые пользователь уже посетил на основе их истории просмотра.

    Псевдоклассы действия пользователя

    К элементу могут динамически применяться основанные на действиях пользователей разные псевдоклассы, которые включают в себя :hover , :active и :focus . Псевдокласс :hover применяется к элементу, когда пользователь двигает курсор над элементом, наиболее часто это используется со ссылками. Псевдокласс :active применяется к элементу, когда пользователь приводит в действие элемент, например, при щелчке по нему. И, наконец, псевдокласс :focus применяется к элементу, когда пользователь сделал элемент точкой внимания страницы, часто с помощью клавишы Tab , переходя от одного элемента к другому.

    Псевдоклассы состояния интерфейса

    Подобно ссылкам существуют также некоторые псевдоклассы, связанные с состоянием элементов пользовательского интерфейса, в частности, внутри форм. Эти псевдоклассы включают в себя :enabled , :disabled , :checked и :indeterminate .

    Псевдокласс :enabled выбирает поля, которые включены и доступны для использования, а псевдокласс :disabled выбирает поля, которые содержат привязанный к ним атрибут disabled . Многие браузеры по умолчанию затемняют такие заблокированные поля для информирования пользователей о том, что поле не доступно для взаимодействия, однако их стиль может быть настроен по желанию через псевдокласс :disabled .

    Последние два элемента состояния интерфейса, псевдоклассы :checked и :indeterminate вращаются вокруг флажков и переключателей. Псевдокласс :checked выбирает флажки или переключатели, которые, как вы можете ожидать, помечены. Когда ни один флажок или переключатель не помечен и не выбран, то он живёт в неопределённом состоянии, для которого может быть использован псевдокласс :indeterminate для нацеливания на подобные элементы.

    Псевдоклассы структуры и положения

    Несколько псевдоклассов относятся к структуре и положению на основе того, где элементы находятся в дереве документа. Эти псевдоклассы приходят в разных формах и размерах, каждый из которых обеспечивает свою собственную уникальную функцию. Некоторые псевдоклассы существуют уже дольше других, однако CSS3 принёс целый новый набор псевдоклассов в дополнение к существующим.

    :first-child, :last-child и :only-child

    Первые структурные псевдоклассы, которые вам скорее всего попадутся, это :first-child , :last-child и :only-child . Псевдокласс :first-child выберет элемент, если это первый ребёнок в родителе, в то время как псевдокласс :last-child выберет элемент, если он последний в родителе. Эти псевдоклассы идеально подходят для выбора первого или последнего элемента в списке и др. Кроме того, :only-child выберет элемент, если он является единственным элементом в родителе. В качестве альтернативы, псевдокласс :only-child может быть записан как :first-child:last-child , однако у :only-child ниже специфичность.

    Здесь селектор li:first-child определяет первый пункт списка, в то время как li:last-child определяет последний пункт списка, таким образом, выбираются строки 2 и 10. Селектор div:only-child ищет

    :first-of-type, :last-of-type и :only-of-type

    Нахождение первого, последнего и единственного ребёнка у родителя очень полезно и часто только это и требуется. Однако иногда вы хотите выбрать только первого, последнего или единственного ребёнка определённого типа элемента. К примеру, вы желаете выбрать только первый или последний абзац внутри статьи или, возможно, только изображение в статье. К счастью, в этом помогают псевдоклассы :first-of-type , :last-of-type и :only-of-type .

    Псевдокласс :first-of-type выберет первый элемент своего типа внутри родителя, в то время как псевдокласс :last-of-type выберет последний элемент этого типа внутри родителя. Псевдокласс :only-of-type выберет элемент, если он является единственным такого типа в родителе.

    В приведённом ниже примере псевдоклассы p:first-of-type и p:last-of-type выберут, соответственно, первый и последний абзацы в статье, независимо от того, являются ли они на самом деле первыми или последними детьми в статье. Строки 3 и 6 выбраны этими селекторами. Селектор img:only-of-type определяет изображение в строке 5, как единственное изображение появляющееся в статье.

    Наконец, есть несколько псевдоклассов структуры и положения, которые выбирают элементы, основанные на номере или алгебраическом выражении. Эти псевдоклассы включают в себя :nth-child(n) , :nth-last-child(n) , :nth-of-type(n) и :nth-last-of-type(n) . Все эти уникальные псевдоклассы начинаются с nth и принимают число или выражение внутри круглых скобок, которое обозначается символом n.

    Число или выражение, которое находится в круглых скобках точно определяет, какой элемент или элементы, должны быть выбраны. Использование конкретного числа вычислит отдельный элемент с начала или с конца дерева документа, а затем выберет его. Использование выражения вычислит множество элементов с начала или с конца дерева документа и выберет их группу или повторения.

    Использование чисел и выражений в псевдоклассах

    Как уже упоминалось, использование конкретного числа в псевдоклассе вычисляет с начала или с конца дерева документа и выбирает один соответствующий элемент. Например, селектор li:nth-child(4) выберет четвёртый пункт в списке. Подсчёт начинается с первого пункта списка и увеличивается на единицу для каждого пункта списка, пока, наконец, не обнаружит четвёртый пункт и выберет его. При указании конкретного числа оно должно быть положительным.

    Выражения для псевдоклассов бывают в формате an, an+b, an-b, n+b, -n+b и -an+b. То же самое выражение может быть переведено и читаться как (a×n)±b. Переменная a обозначает множитель, с учётом которого будут вычисляться элементы, в то время как переменная b обозначает, откуда будет начинаться или происходить отсчёт.

    Например, селектор li:nth-child(3n) будет определять каждый третий элемент пункта списка. Использование этого выражения соответствует 3×0, 3×1, 3×2 и так далее. Как вы можете видеть, результаты этого выражения выбирают третий, шестой и каждый элемент кратный трём.

    Кроме того, в качестве значений могут быть использованы ключевые слова odd и even . Как и следовало ожидать, они будут выбирать, соответственно, нечётные или чётные элементы. Если ключевые слова не привлекают, то выражение 2n+1 выберет все нечётные элементы, а выражение 2n выберет все чётные элементы.

    Селектор li:nth-child(4n+7) определит каждый четвёртый пункт списка, начиная с седьмого пункта. Опять же, использование этого выражения эквивалентно (4×0)+7, (4×1)+7, (4×2)+7 и так далее. Результаты этого выражения приведут к выбору седьмого, одиннадцатого, пятнадцатого и каждого четвёртого элемента.

    При использовании аргумента n без числа впереди, переменная a расценивается как равная 1. Селектор li:nth-child(n+5) выберет каждый пункт списка, начиная с пятого, оставив первые четыре пункта списка не выбранными. В выражении это разбирается как (1×0)+5, (1×1)+5, (1×2)+5 и так далее.

    Для создания более сложных вещей могут быть задействованы отрицательные числа. Например, селектор li:nth-child(6n-4) будет отсчитывать каждый шестой пункт списка, начиная с -4, выбрав второй, восьмой, четырнадцатый пункты списка и так далее. Тот же селектор li:nth-child(6n-4) также может быть записан как li:nth-child(6n+2) , без использования отрицательной переменной b.

    Отрицательная переменная или отрицательный аргумент n должен сопровождаться положительной переменной b. Когда аргументу n предшествует отрицательная переменная a, то переменная b определяет, насколько высоко будет достигнут отсчёт. Например, селектор li:nth-child(-3n+12) выберет каждый третий пункт списка в первых двенадцати пунктах. Селектор li:nth-child(-n+9) выберет первые девять пунктов списка, так как переменная a без заявленного числа по умолчанию равна -1.

    :nth-child(n) и :nth-last-child(n)

    При общем понимании того, как работают числа и выражения в псевдоклассах, давайте взглянем на полезные псевдоклассы, где эти числа и выражения могут использоваться, первыми из которых являются :nth-child(n) и :nth-last-child(n) . Эти псевдоклассы работают похоже на :first-child и :last-child , в том смысле что они рассматривают и считают все элементы в родителе и выбирают только определённый элемент. :nth-child(n) работает с начала дерева документа, а :nth-last-child(n) работает с конца дерева документа.

    Используя псевдокласс :nth-child(n) давайте взглянем на селектор li:nth-child(3n) . Он определяет каждый третий пункт списка, таким образом, будут выбраны строки 4 и 7.

    Использование другого выражения в псевдоклассе :nth-child(n) даст другую выборку. Селектор li:nth-child(2n+3) , к примеру, определит каждый второй пункт списка, начиная с третьего. В результате будут выбраны пункты в строках 4 и 6.

    Очередное изменение выражения, на этот раз с отрицательным значением, даст новый выбор. Здесь селектор li:nth-child(-n+4) определяет четыре верхних пункта списка, оставляя остальные пункты не выделенными, таким образом будут выбраны строки со 1 по 4.

    Добавление отрицательного числа перед аргументом n снова изменяет выбор. Здесь селектор li:nth-child(-2n+5) определяет каждый второй пункт списка из первых пяти пунктов, таким образом, будут выбраны пункты в строках 2, 4 и 6.

    Изменение псевдокласса :nth-child(n) на :nth-last-child(n) переключает направление счёта, теперь подсчёт начинается с конца дерева документа. Селектор li:nth-last-child(3n+2) , к примеру, определяет каждый третий пункт списка, начиная со второго по последний, двигаясь по направлению к началу списка. Здесь выбраны пункты списка в строках 3 и 6.

    :nth-of-type(n) и :nth-last-of-type(n)

    Псевдоклассы :nth-of-type(n) и :nth-last-of-type(n) очень похожи на :nth-child(n) и :nth-last-child(n) , однако вместо того чтобы считать каждый элемент внутри родителя псевдоклассы :nth-of-type(n) и :nth-last-of-type(n) учитывают только элементы своего собственного типа. Например, при подсчете абзацев в статье, псевдоклассы :nth-of-type(n) и :nth-last-of-type(n) пропустят любые заголовки,

    Используя псевдокласс :nth-of-type(n) в селекторе p:nth-of-type(3n) мы можем определить каждый третий абзац в родителе, независимо от других родственных элементов внутри родителя. Здесь выбираются абзацы в строках 5 и 9.

    Как и с псевдоклассами :nth-child(n) и :nth-last-child(n) , основное различие между :nth-of-type(n) и :nth-last-of-type(n) состоит в том, что :nth-of-type(n) считает элементы с начала дерева документа, а :nth-last-of-type(n) считает элементы с конца дерева документа.

    Используя псевдокласс :nth-last-of-type(n) мы можем записать селектор p:nth-last-of-type(2n+1) , который определяет каждый второй абзац с конца родительского элемента, начиная с последнего абзаца. Здесь выбираются абзацы в строках 4, 7 и 9.

    Псевдокласс :target

    Псевдокласс :target используется для стилизации элементов, когда значение атрибута >id у элемента на странице, к примеру, , то этот элемент может быть идентифицирован и стилизован с помощью псевдокласса :target . Указатель фрагмента наиболее часто встречаются при использовании на странице ссылки или ссылки на другую часть той же страницы.

    Взгляните на приведённый ниже код. Если пользователь хотел бы посетить страницу с указателем фрагмента #hello, то раздел с тем же значением атрибута id будет стилизован соответствующим образом с помощью псевдокласса :target . Если указатель фрагмента URI изменился и совпадает со значением атрибута id другого раздела, то новый раздел может быть стилизован с помощью того же селектора и псевдокласса, что и ранее.

    Псевдокласс :empty

    Псевдокласс :empty позволяет выбрать элементы, которые не содержат детей или текст. Комментарии, инструкции по обработке и пустой текст не считаются детьми и не рассматриваются как таковые.

    Использование псевдокласса div:empty определит

    Псевдокласс :not

    Псевдокласс :not(x) принимает аргумент и отфильтровывает выборку, которая будет сделана. Селектор p:not(.intro) использует псевдокласс :not для определения каждого абзаца без класса intro . Элемент абзаца определяется в начале селектора, затем следует псевдокласс :not(x) . Внутри скобок идёт селектор отрицания, в данном случае класс intro .

    Ниже оба селектора div:not(.awesome) и :not(div) используют псевдокласс :not(x) . Селектор div:not(.awesome) определяет любой

    Пример с псевдоклассами

    Обзор псевдоклассов

    Пример Название Описание
    a:link Псевдокласс ссылок Выбирает ссылки, которые не были просмотрены пользователем.
    a:visited Псевдокласс ссылок Выбирает ссылки, которые были посещены пользователем.
    a:hover Псевдокласс действия Выбирает элемент, когда пользователь наводит на него курсор.
    a:active Псевдокласс действия Выбирает элемент, когда пользователь активирует его.
    a:focus Псевдокласс действия Выбирает элемент, когда пользователь сделал его точкой внимания.
    input:enabled Псевдокласс состояния Выбирает элемент в доступном состоянии.
    input:disabled Псевдокласс состояния Выбирает элемент в отключенном состоянии, посредством атрибута disabled .
    input:checked Псевдокласс состояния Выбирает флажок или переключатель, который был помечен.
    input:indeterminate Псевдокласс состояния Выбирает флажок или переключатель, который не был помечен или не помечен, оставляя его в неопределённом состоянии.
    li:first-child Структурный псевдокласс Выбирает первый элемент в родителе.
    li:last-child Структурный псевдокласс Выбирает последний элемент в родителе.
    div:only-child Структурный псевдокласс Выбирает единственный элемент в родителе.
    p:first-of-type Структурный псевдокласс Выбирает первый элемент своего типа в родителе.
    p:last-of-type Структурный псевдокласс Выбирает последний элемент своего типа в родителе.
    img:only-of-type Структурный псевдокласс Выбирает единственный элемент своего типа в родителе.
    li:nth-child(2n+3) Структурный псевдокласс Выбирает элемент, который соответствует заданному числу или выражению, считая все элементы с начала дерева документа.
    li:nth-last-child(3n+2) Структурный псевдокласс Выбирает элемент, который соответствует заданному числу или выражению, считая все элементы с конца дерева документа.
    p:nth-of-type(3n) Структурный псевдокласс Выбирает элемент, который соответствует заданному числу или выражению, считая только элементы этого типа с начала дерева документа.
    p:nth-last-of-type(2n+1) Структурный псевдокласс Выбирает элемент, который соответствует заданному числу или выражению, считая только элементы этого типа с конца дерева документа.
    section:target Псевдокласс :target Выбирает элемент, у которого значение атрибута id совпадает с указателем фрагмента URI.
    div:empty Псевдокласс :empty Выбирает элемент, который не содержит каких-либо детей или текста.
    div:not(.awesome) Псевдокласс :not Выбирает элемент не представленный заявленным аргументом.

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

    Псевдоэлементы — это динамические элементы, которые не существуют в дереве документа и при использовании с селекторами эти псевдоэлементы дают уникальные части страницы, которые можно стилизовать. Один важный момент следует отметить — только один псевдоэлемент может быть использован в селекторе в определённое время.

    Текстовые псевдоэлементы

    Первыми реализованными псевдоэлементами были текстовые псевдоэлементы :first-letter и :first-line . Псевдоэлемент :first-letter определяет первую букву текста внутри элемента, в то время как :first-line определяет первую строку текста внутри элемента.

    В демонстрации ниже первая буква абзаца с классом alpha задана большим размером шрифта и оранжевым цветом, так же как и первая строка абзаца с классом bravo . Эта выборка сделана с помощью текстовых псевдоклассов :first-letter и :first-line , соответственно.

    Демонстрация текстовых псевдоэлементов

    Псевдоэлементы, генерируемые содержимое

    Псевдоэлементы :before и :after создают новые строчные псевдоэлементы только внутри выбранного элемента. Чаще всего эти псевдоэлементы используются в сочетании со свойством content , чтобы добавить незначительную информацию на страницу, однако, это не всегда так. Дополнительное применение этих псевдоэлементов может добавить компоненты пользовательского интерфейса на страницу без необходимости загромождать документ несемантическими элементами.

    Псевдоэлемент :before создаёт псевдоэлемент до или впереди выбранного элемента, в то время как :after создаёт псевдоэлемент после или позади выбранного элемента. Эти псевдоэлементы выводятся вложенными внутри выбранного элемента, а не за его пределами. Ниже псевдоэлемент :after используется для отображения значения атрибута href у ссылок в круглых скобках после самой ссылки. Такая информация полезна, но, в конечном итоге, не всякий браузер поддерживает эти псевдоэлементы.

    Демонстрация псевдоэлементов, генерируемых содержимое

    Псевдоэлемент ::selection

    Псевдоэлемент ::selection определяет выделенную пользователем часть документа. Выделение затем может быть стилизовано, но только с помощью свойств color , background , background-color и text-shadow . Стоит отметить, что свойство background-image игнорируется. В то же время сокращённое свойство background может быть использовано для добавления цвета, но любые изображения будут игнорироваться.

    Двоеточие (:) и двойное двоеточие (::)

    Псевдоэлемент ::selection был добавлен в CSS3 в попытке отделить псевдоклассы от псевдоэлементов с помощью двойного двоеточия, которое было добавлено к псевдоэлементам. К счастью, большинство браузеров будут поддерживать оба значения, одиночные или двойные двоеточия у псевдоэлементов, однако псевдоэлемент ::selection всегда должен начинаться с двойного двоеточия.

    При выделении любого текста в демонстрации ниже фон становится оранжевым благодаря псевдоэлементу ::selection . Также обратите внимание на ::-moz-selection . Префикс от Mozilla был добавлен, чтобы обеспечить лучшую поддержку для всех браузеров.

    Демонстрация псевдоэлементов

    Обзор псевдоэлементов

    Пример Название Описание
    .alpha:first-letter Текстовый псевдоэлемент Выбирает первую букву текста внутри элемента.
    .bravo:first-line Текстовый псевдоэлемент Выбирает первую строку текста внутри элемента.
    div:before Генерируемое содержимое Создаёт псевдоэлемент внутри выбранного элемента в его начале.
    a:after Генерируемое содержимое Создаёт псевдоэлемент внутри выбранного элемента в его конце.
    ::selection Псевдоэлемент ::selection Выбирает часть документа, который был выделен с помощью действий пользователя.

    Поддержка селекторов в браузерах

    В то время как эти селекторы предлагают разные возможности и способности делать некоторые действительно удивительные вещи с помощью CSS, они иногда страдают от плохой поддержки браузеров. Перед тем, как делать что-либо слишком критичное, проверьте селекторы которые вы желаете использовать в наиболее популярных браузерах, а затем сделайте вывод о том, подходят они вам или нет.

    CSS3.info предлагает инструмент CSS3 Selectors Test, который будет информировать вас о том, какие селекторы поддерживаются браузером. Также неплохой идеей будет проверить поддержку браузера непосредственно в нём.

    Кроме того, Selectivizr, утилита JavaScript, обеспечивает великолепную поддержку этих селекторов в Internet Explorer 6-8. Больше поддержки при необходимости может также предложить jQuery selectors.

    Скорость и производительность селекторов

    Важно обратить внимание на скорость и производительность селекторов, так как использование слишком большого количества сложных селекторов может замедлить отображение страницы. Будьте внимательны и когда селектор начинает выглядеть немного странно, подумайте о том чтобы пересмотреть его и найти лучшее решение.

    Селекторы CSS

    CSS селекторы позволяют установить связь одного правила с определенным элементом HTML . А также, чтобы задавать стили для отдельных элементов, игнорируя другие:

    В этой статье мы рассмотрим способы определения стилей веб-страницы с помощью селекторов классов, селекторов потомков, псевдоклассов и селекторов идентификаторов.

    Настройка

    Для примера нам нужен только один HTML-файл и таблица стилей CSS . Создайте папку css-selectors и веб-страницу под названием selectors.html со следующей разметкой:

    Теперь создадим в той же папке файл styles.css . Это все, что понадобится для изучения CSS селекторов .

    Селекторы классов

    Селекторы классов позволяют применять стили CSS к определенному элементу HTML . Они дают возможность различать элементы HTML одного и того же типа. Например, когда есть два элемента

    • Указанный атрибут класса в элементе HTML ;
    • Соответствующий селектор классов CSS .

    Можно использовать селектор классов, чтобы назначить стили для первого абзаца нашей страницы-примера. Сначала добавим к нужному абзацу атрибут класса:

    Теперь стилизуем абзац

    в файле CSS с помощью следующего кода:

    Это правило применяется только к элементам с соответствующим атрибутом класса. Обратите внимание на точку (.) — префикс перед именем класса. Это отличает соседние селекторы CSS классов от селекторов типов:

    Конвенция имен классов

    Значение атрибута класса HTML может представлять собой почти все, что угодно, если оно соответствует селектору в коде CSS . Стандартная конвенция имен классов — это использование прописных букв и дефисов вместо пробелов, как в именах файлов и папок.

    Добавление атрибута class не изменяет смысловое значение HTML-документа и служит для подключения CSS . Рекомендуется избегать имен классов, основанных на том, как они отображаются. Использование чего-то более семантического, например, .synopsis , дает больше свободы в действиях. Что позволяет настроить отображение этого абзаца.

    Более полезные div

    Атрибут class применяется не только к элементам

    — он может быть использован для любого элемента HTML . Взяв на вооружение селекторы классов CSS , можно сделать блоки

    Начнем с отдельных элементов. На этот раз мы будем использовать класс вместо CSS селектора div . Добавьте следующий код в файл styles.css :

    Конечно, для этого нам нужен соответствующий атрибут класса. Измените

    Данный код позволяет использовать стили и для других элементов, а не только для кнопок.

    Дивы контейнеров

    Попробуем создать макет фиксированной ширины с использованием метода автополей. Сначала оберните весь документ в

    Независимо от того, как будет изменяться размер окна браузера, веб-страница всегда будет иметь ширину 600 пикселей и выравниваться горизонтально по центру доступного пространства. Обратите внимание, что то же самое мы раньше делали для кнопки, но теперь мы делаем это с несколькими элементами одновременно, вложив их в общий контейнер:

    Именно таким образом определяются более сложные макеты веб-страниц. Например, если на нашей странице была бы боковая панель, мы бы вложили все ее элементы в другой

    Без CSS селекторов атрибутов классов, которые позволяют дифференцировать элементы

    Повторное использование стилей классов

    Один и тот же класс может применяться к нескольким элементам в рамках одного HTML-документа . Это означает, что можно использовать произвольные объявления CSS везде. Чтобы создать еще одну кнопку, нужно добавить еще один HTML-элемент с тем же классом:

    В результате этого мы получим вторую кнопку, которая выглядит так же, как и первая. Это значительно упрощает работу веб-разработчиков. Если мы когда-нибудь захотим изменить цвет кнопки, нужно будет сделать это только в одном месте, и все наши кнопки автоматически обновятся:

    Изменение стилей классов

    Что, если мы захотим немного изменить вторую кнопку? К счастью, можно применить несколько классов к одному и тому же HTML-элементу . Стили из каждого класса будут применены к элементу, что даст возможность повторно использовать стили .button и одновременно переопределить некоторые из них новым классом:

    Мы добавляем еще один класс к нашей второй кнопке с помощью следующей разметки. Обратите внимание, что несколько классов помещаются в один атрибут класса через пробелы:

    Этому элементу теперь присвоено два разных класса, и можно использовать любой из них для определения стилей. Это дает некоторые дополнительные возможности. Можно задать для второй кнопки стили класса .button и стили, относящиеся только к этой кнопке класса .call-to-action ( обязательно добавьте этот код после правила .button ):

    Порядок имеет значение

    Хочу обратить ваше внимание на две важные вещи, касающиеся нашей второй кнопки:

    • Это добавление нового объявления по сравнению с исходным правилом .button — font-style ;
    • Переопределение существующего в классе .button стиля — background-color .

    Переопределение дочерних селекторов в CSS происходит из-за порядка размещения правил .call-to-action и .button в таблице стилей. Когда в файле CSS есть два противоречащих друг другу свойства, всегда применяется то, которое указано последним. Если бы вы разместили .call-to-action перед .button , применялось бы это правило, и кнопка осталась бы синей.

    Это означает, что порядок атрибутов класса в HTML-элементе не влияет на поведение переопределения. Несколько классов в одном элементе применяются « одинаково », а приоритет определяется исключительно порядком размещения правил в файле styles.css .

    Другими словами, следующие элементы эквивалентны:

    Селектор потомков

    Возможно, вы заметили, что в нашем первом абзаце больше нельзя отличить от остального текста абзаца, так как правило .synopsis задает отображение курсивом всего текста абзаца.

    Чтобы изменить этот элемент , можно было бы добавить к нему еще один класс. Но это приведет к тому, что код будет не очень удобен. Мы хотим иметь правило .synopsis в качестве отдельного независимого компонента, для которого можно полностью задать стили через CSS . То есть без необходимости внесения изменений в HTML только для того, чтобы изменить какие-то стили:

    Это то, для чего предназначены CSS селекторы потомков. Они позволяют настраивать только те элементы, которые находятся внутри другого элемента. Например, можно вывести этот элемент в абзаце .synopsis со следующими стилями:

    Добавление этого правила в файл styles.css задаст отображение вертикальными ( римскими ) символами, тем самым определяя разницу с курсивным шрифтом, которым отображается весь абзац

    . При этом остальных элементов , размещенных на странице это изменение не коснется:

    Селекторы потомков не ограничиваются селекторами классов. Таким образом, можно комбинировать любую другую группу селекторов. Например, если нужно выбрать только элементы внутри заголовков:

    Не переусердствуйте

    Можно вложить CSS селектор потомков настолько глубоко, насколько нужно, но не увлекайтесь. Все становится запутанно, когда вы начинаете писать правила, которые выглядят так:

    Эти стили нельзя будет повторно использовать, поскольку они соответствуют только следующей структуре HTML :

    Если захотите применить эти стили к заголовку

    , который не был обернут в тег

    Псевдоклассы для ссылок

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

    Основные стили ссылок

    В отличие от CSS селекторов псевдоклассы начинаются с двоеточия, за которым следует имя класса. Наиболее распространенными псевдоклассами ссылок являются:

    • :link — ссылка, по которой пользователь еще не переходил;
    • :visited — ссылка, по которой пользователь переходил раньше;
    • :hover — ссылка, на которую пользователь навел курсор мыши;
    • :active — ссылка, нажатая мышью (или пальцем).

    Рассмотрим эти псевдоклассы, добавив следующие правила в CSS ( также обратите внимание на то, что мы используем для обозначения цветов ключевые слова , а не шестнадцатеричные коды ):

    Состояние visited hover

    Приведенный выше фрагмент кода отлично подходит для большинства сайтов, но давайте более внимательно рассмотрим поведение a:visited , когда мы изменим атрибут href на URL-адрес , который раньше посещали. Стиль a:hover применяется как к ранее посещенным ссылкам, так и к тем, по которым мы еще не переходили. Можно еще больше модифицировать ссылки, объединив псевдоклассы.

    Добавьте это правило ниже предыдущего фрагмента кода:

    Данный код создает специальный стиль для состояния при наведении курсора мыши на посещенные ранее ссылки. Наведя курсор на не посещенную ранее ссылку, мы увидим, что она « перекрашивается » в аквамариновый цвет. А при наведении курсора на посещенную ссылку она становится оранжевой. Фантастика! Но это ломает наш стиль a:active из-за некоторых внутренних аспектов CSS , о которых вы никогда не захотите читать. Когда вы нажмете на ссылку, она больше не будет становиться красной.

    Состояние visited active

    Можно исправить это с помощью CSS псевдоселектора a:visited:active . Добавьте следующий код в конец таблицы стилей. Обратите внимание, что, как и в случае с классом .call-to-action , порядок, в котором правила определяются в файле styles.css , имеет значение:

    Эти два последних раздела позволят задавать стили посещенных ссылок полностью отдельно от не посещенных.

    Псевдоклассы для кнопок

    Псевдоклассы предназначены не только для определения стилей ссылок. Вместо указания стилей для класса a:link и потомков изменим с помощью псевдоклассов класс .button . Это позволит создавать кнопки, которые ведут куда-то.

    Элемент ссылки, а не элемент div

    Сначала нужно изменить кнопки, чтобы они стали элементами , а не просто элементами

    Если вы перезагрузите документ в браузере, то увидите, что некоторые стили больше не действуют. Хотя мы используем одни и те же классы. Это связано с тем, что является встроенным элементом, а также имеет значение цвета по умолчанию:

    Нам нужно снова сделать этот элемент блочным и удалить часть стилей ссылок по умолчанию.

    Стили кнопок

    Начнем с :link и :visited . Мы используем аналогичный подход, что и в предыдущем разделе о CSS селекторах родителя. Но поскольку это кнопки, то мы сохраним одинаковые цвета для состояний посещенная и не посещенная. Измените существующие правила .button следующим образом:

    Обратите внимание на новые псевдоклассы :link и :visited в селекторе. Без них стиль браузера по умолчанию для a:link не изменился бы. Теперь оформим состояние при наведении курсора.

    Обе наши кнопки при наведении курсора будут окрашиваться в более светлый голубой цвет. Сделаем так, чтобы кнопки становились темнее, когда пользователь нажимает на них с помощью псевдокласса :active :

    Стили, которые мы только что определили, готовы к повторному использованию. Назначьте класс .button любому HTML-элементу , и вы превратите его в интерактивную кнопку.

    Другая кнопка

    Займемся второй кнопкой. Предполагается, что она имеет желтый фон, но мы изменили это кодом из предыдущего раздела. Наш селектор .button:link более « специфичен », чем текущее правило .call-to-action , поэтому он имеет приоритет.

    Исправим такое положение вещей, применив к нашему правилу .call-to-action несколько псевдоклассов. Замените существующее правило следующим ( убедитесь, что это определено после новых стилей .button из предыдущего раздела о дочерних селекторах в CSS ):

    Мы назначили класс .call-to-action только для второй кнопки, поэтому только она станет желтой. Конечно, нам по-прежнему нужно, чтобы класс .button был назначен для обоих элементов , поскольку он определяет общие стили, такие как отступы, радиус границы и размер шрифта.

    Псевдоклассы для структуры

    Состояния ссылок – это лишь один аспект псевдоклассов. Существует также множество других псевдоклассов , которые предоставляют дополнительную информацию о контексте элемента. Например, псевдокласс last-of-type выбирает последний элемент определенного типа в родительском элементе. Это является альтернативой селекторам классов.

    Например, мы могли бы использовать :last-of-type , чтобы добавить в наш пример определенное пространство после последнего абзаца страницы:

    Это позволяет не затрагивать первые два элемента

    на странице, не добавляя для последнего абзаца новый атрибут класса:

    Можно даже использовать псевдокласс :first-of-type вместо класса .synopsis . Заменив существующее правило .synopsis следующим фрагментом кода, мы получим тот же результат:

    Использование этого метода вместо устаревших классов имеет свои преимущества и недостатки. Например, это работает только в том случае, если наш синопсис является элементом

    . Если бы мы захотели создать синтаксис с несколькими параграфами, объединив много элементов

    Предостережения

    Но псевдоклассы немного сложнее. Контекстные селекторы CSS first-of-type и last-of-type действуют только внутри своего родительского элемента. Другими словами, p:first-of-type выбирает первый элемент

    в каждом элементе контейнера.

    У нас есть один общий

    Это иллюстрирует сложность применения псевдоклассов для структуры. Первый элемент

    здесь также будет соответствовать p:first-of-type , потому что область применения псевдокласса ограничена родительским элементом.

    Если вы не хотите затрагивать абзацы в боковой панели, и выбрать только первый

    Различные разработчики придерживаются разных « школ ». Некоторым нравится семантическая природа псевдоклассов, в то время как другие доводят до крайности применение различных подробных атрибутов класса для каждого HTML-элемента .

    Селекторы идентификаторов

    CSS селекторы идентификаторов – альтернатива селекторам классов. Они работают почти так же, но на странице может размещаться только один элемент с определенным идентификатором. Это означает, что вы не сможете повторно использовать стили.

    Вместо атрибута class для любого элемента HTML , используется атрибут id . Попробуйте добавить идентификатор ко второй кнопке:

    Соответствующий селектор CSS должен начинаться с символа хэша ( # ). Добавление следующего кода в файл styles.css изменит цвет текста желтой кнопки:

    Проблема в том, что если мы захотим задать этот стиль и для другой кнопки, то нужно присвоить ей еще один уникальный атрибут id . Довольно скоро наш CSS начнет выглядеть довольно « грязно »:

    По этой причине использовать CSS селекторы идентификаторов обычно не рекомендуется. Вместо этого используйте селекторы классов.

    Фрагменты URL-адресов

    Атрибуты id должны быть уникальными, поскольку на них указывают « фрагменты URL-адресов ». Фрагменты — это элементы, с помощью которых можно указать пользователям на определенную часть веб-страницы. Они выглядят как селекторы идентификаторов, расположенные в конце URL-адреса :

    Например, если мы хотим указать пользователю на вторую кнопку, можно использовать следующий код. Обратите внимание, что можно полностью опустить URL-адрес , если он указывает на другой раздел той же веб-страницы:

    Если вы добавите первый вариант ссылки в разметку страницы selectors.html и кликните по ней, то увидите, что данный URL-адрес значится в адресной строке браузера. Чтобы увидеть, как осуществляется переход ко второй кнопке, нужно добавить на страницу немного произвольного контента или сделать высоту окна маленькой:

    Этот пересекающийся функционал является веской причиной для того, чтобы избегать использования идентификаторов. Они создают зависимость между URL-адресами сайта и стилями CSS . Представьте, что вы используете в заголовках кучу атрибутов id в качестве как фрагментов URL-адресов , так и идентификаторов. Если вы забудете обновить таблицу стилей, когда отредактируете URL-адрес , то сломаете свой сайт.

    Специфичность CSS

    Порядок имеет значение, когда речь идет о свойствах, прописанных во внешней таблице стилей. При прочих условиях правила применяются сверху вниз. Это позволяет переопределять правила CSS селекторов атрибутов предсказуемым образом:

    Но не все селекторы CSS равнозначны. « Специфичность CSS » — это значимость, установленная для различных категорий селекторов. Это означает, что некоторые селекторы всегда будут переопределять другие независимо от того, какую позицию они занимают в таблице стилей.

    Если вы добавите следующий код после существующих правил .call-to-action , он переопределит заданный ранее цвет фона. Если вы разместите его в верхней части файла, он сам будет переопределен, и наша кнопка не станет красной. Это ожидаемое поведение:

    Теперь посмотрите, что происходит, когда мы пытаемся сделать то же самое с помощью селектора идентификатора. Во-первых, обязательно удалите предыдущий фрагмент кода, а затем попробуйте добавить приведенный ниже код до существующих правил .call-to-action :

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

    Специфичность селекторов, которые мы рассматривали в этой статье, показана ниже: от максимальной до минимальной:

    Иногда это приводит к путанице. Это настолько серьезная проблема, что была разработана целая методология под названием « BEM ». Суть BEM заключается в попытке обеспечить то, чтобы правила CSS были многоразовыми, сделав все селекторами классов. Это исключает возможность возникновения проблем.

    Заключение

    В этой статье вы получили практический опыт работы с CSS селекторами классов, селекторами потомков, псевдоклассами, стилями ссылок и селекторами идентификаторов. Цель всех, описанных в этой статье приемов – обеспечить возможность указать определенный HTML-элемент из CSS-кода . Селекторы классов являются самыми универсальными и имеют наименьшее количество недостатков.

    Данная публикация представляет собой перевод статьи « css selectors » , подготовленной дружной командой проекта Интернет-технологии.ру

    3. CSS — Селекторы: синтаксис, виды, правила и группировка

    CSS содержит правила стиля, которые интерпретируются браузером, а затем применяются к соответствующим элементам вашего документа. Правило стиля состоит из трех частей:

      Селектор — это HTML-тег, к которому будет применяться стиль. Это может быть любой тег, например,

    или

    и т.д.
  • Свойство — это тип атрибута HTML-тега. Проще говоря, все атрибуты в HTML преобразуются в свойства CSS. Ими могут быть цвета, границы, отступы и т.д.
  • Значение — задается свойству. Например, свойство цвета может иметь значение green, #008000 и т.д.
  • Синтаксис селекторов в CSS следующий:

    Пример. Вы можете задать границу таблицы следующим образом:

    Здесь синтаксис селектора такой: table — это селектор, а border — свойство, а 2px solid #FF8C00 — значение этого свойства.

    Вы можете задавать селекторы различными способами, как Вам будет удобно. Ниже представлены виды селекторов.

    Содержание

    Стандартные селекторы

    Это тот же самый селектор, который Вы видели выше. Опять же, еще один пример, чтобы дать цвет всем заголовкам первого уровня:

    Универсальные селекторы

    Вместо того, чтобы выбирать элементы определенного типа, универсальный селектор вполне просто соответствует имени любого типа элемента:

    Это правило отображает в нашем документе содержимое каждого элемента в сером цвете.

    Селекторы потомков или вложенные селекторы

    Предположим, Вы хотите применить правило стиля к определенному элементу только тогда, когда оно находится внутри определенного элемента, то в этом Вам помогут вложенные селекторы или селекторы потомков. Как показано в следующем примере, правило стиля будет применяться к элементу только тогда, когда оно находится внутри тега

      .

    Селекторы класса

    Вы можете задать правила стиля для элементов на основе атрибута class. Все элементы, имеющие этот класс, будут отформатированы в соответствии с определенным правилом.

    Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом . Вы можете сделать селектор класса немного более конкретным. Например:

    Это правило отображает содержимое в синем цвете только для элементов

    с атрибутом .

    Вы можете применить к одному элементу несколько селекторов класса. Рассмотрим следующий пример:

    ID селекторы

    Вы можете задать правила стиля для элементов на основе атрибутa id. Все элементы, имеющие этот идентификатор, будут отформатированы в соответствии с определенным правилом.

    Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом . Вы можете сделать id селектор немного более конкретным. Например:

    Это правило отображает содержимое в синем цвете только для элементов

    с атрибутом .

    Истинная мощность id селекторов — это когда они используются в качестве основы для селекторов-потомков, например:

    В этом примере все заголовки второго уровня будут отображаться в синем цвете, когда они будут находиться в тегах с атрибутом .

    Дочерние селекторы

    Вы уже знаете селекторы потомков. Существует еще один тип селектора, который очень похож на селекторы потомков, но имеет другую функциональность, это дочерний селектор. Рассмотрим следующий пример:

    Это правило будет отображать все абзацы в синем цвете, если они являются прямым дочерним элементом . Другие абзацы, помещенные внутри других элементов типа

    или

    Соседние селекторы

    HTML-элементы, идущие друг за другом, называются соседними. Рассмотрим следующий пример:

    Это правило будет отображать содержимое тега в синем цвете, если он идет после элемента . Другие теги , идущие не после тега , не будут иметь никакого эффекта этого правила.

    Селекторы атрибутов

    Вы также можете применять стили к HTML-элементам с определенными атрибутами. Ниже правило стиля будет соответствовать всем input элементам, имеющим атрибут type со значением text:

    Преимущество использования селекторов атрибутов заключается в том, что элемент не изменяется, а цвет применяется только к нужным текстовым полям.

    Для селектора атрибутов применяются следующие правила:

    • p[lang] — выбирает все элементы абзаца с атрибутом lang.
    • p[lang=»ru»] — выбирает все элементы абзаца, где атрибут lang имеет точное значение «ru».
    • p[lang

    =»ru»] — выбирает все элементы абзаца, где атрибут lang содержит слово «ru».

  • p[lang|=»ru»] — выбирает все элементы абзаца, где атрибут lang содержит значения, которые являются точными «ru» или начинаются с «ru».
  • Несколько правил стиля

    Возможно, Вам потребуется определить несколько правил стиля для одного элемента. Вы можете задать эти правила для объединения нескольких свойств и соответствующих значений в один блок, как показано в следующем примере:

    Все пары свойств и значений разделяются точкой с запятой (;). Вы можете сохранить их в одной строке или нескольких строках. Для лучшей читаемости сохраняйте их в отдельных строках.

    Не беспокойтесь о свойствах, упомянутых в вышеупомянутом блоке. Эти свойства будут объяснены в следующих уроках.

    Группировка селекторов в CSS

    Вы можете применить стиль для многих селекторов, если хотите. Просто отделите селектора запятой, как показано в следующем примере:

    Это правило стиля будет применено к элементам h1, h2 и h3. Порядок списка при группировки селекторов не имеет значения. Все элементы в селекторе будут иметь соответствующие объявления, применяемые к ним.

    Вы можете группировать различные id селектора вместе, как показано ниже:

    30 CSS-селекторов, которые вы должны знать

    Поговорим о CSS селекторах. Помимо обычного обращения к элементам через имя класса, >

    1. * — выделение всех элементов

    Начнем с простых селекторов, и затем рассмотрим более сложные. Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding . На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно грузит браузер.

    Его также можно использовать для выделения всех дочерних элементов, определенного контейнера.

    В данном случае выделяться все дочерние элементы блока #container . Старайтесь не злоупотреблять им.

    2. #X

    Знак решетки перед CSS-селектором выделит нам элемент с . Это очень просто, но будьте аккуратны при использовании id.

    Спросите себя: мне абсолютно необходимо выделение по id?

    id жестко привязывают стиль к элементу и не дает возможности повторного использования. Более предпочтительным будет использование классов , названий тэгов или даже псевдо-классов.

    3 .Х

    Это CSS-селектор класса Х. Разница между id и классом заключается в том, что одному классу может принадлежать несколько элементов на странице. Используйте классы, когда вы хотите применить стиль к нескольким однотипным элементам. При использовании id вам придется писать стиль для каждого отдельного элемента.

    4. Х Y

    CSS-селектор дочерних элементов встречается чаще всего. Если вам надо выделить элементы определенного типа из множества дочерних элементов, используете этот селектор. Например, вам надо выделить все ссылки, которые находятся в элементе li . В этом случае используйте этот селектор.

    Не следует делать CSS-селекторы вида Х Y Z A B.error . Всегда спрашивайте себя, а обязательно ли для выделения данного элемента писать такой громоздкий CSS-селектор.

    5. X

    Что делать, если вы хотите, чтобы охватить все элементы данного типа на странице? Будьте проще, используйте CSS-селектор типа. Если вы должны выделить все неупорядоченные списки, используйте ul <>

    6. X:visited and X:link

    Мы используем псевдо-класс :link , для выделения всех ссылок, на которые еще не кликнули.

    Если же нам надо применить определенный стиль у уже посещенным ссылкам, то используем псевдо-класс :visited .

    7. Х+Y

    Выделяет последующий элемент. Он будет выбирать только элемент типа Y, который идет сразу после элемента Х. В примере текст первого абзаца после каждого ul будет красного цвета.

    8. Х>Y

    Разница между стандартными Х Y и X > Y состоит в том, что рассматриваемый CSS-селектор будет выбирать только непосредственные дочерние элементы. Например, рассмотрим следующий код.

    CSS-селектор #container > ul выберет только ul , которые являются непосредственными дочерними элементами div с >. Он не выберет, например, ul , являющиеся дочерними элементами первых li .

    Поэтому можно получить выигрыш в производительности используя данный CSS-селектор. В самом деле, это особенно рекомендуется при работе с jQuery или другими библиотеками, выбирающими элементы на основе правил CSS -селекторов.

    9. Х

    Этот CSS-селектор очень похож на X + Y, однако, является менее строгим. При использовании ul + p будет выбрать только первый элемент, идущий за Х. В данном случае будут выбраны все элементы p, идущие на ul.

    10. X[title]

    В CSS-селекторах также можно использовать атрибуты. Например в данном примере мы выделили все ссылки, имеющие атрибут титле. Остальные ссылки останутся не затронутыми.

    11. X [href=»Foo»]

    Все ссылки, которые ссылаются на yandex.ru будут золотыми. Все остальные ссылки останутся неизменными неизменным.

    Обратите внимание, что на кавычки. Не забудьте так же делать в jQuery и других JavaScript библиотеках, в которых элементы выбираются по CSS-селекторам. По возможности, всегда используйте CSS3 CSS-селекторы.

    Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на yandex.ru, а например на https://yandex.ru/page1? В этих случаях мы можем использовать регулярные выражения.

    12. X [HREF *= «yandex.ru»]

    Вот то, что нам нужно. Звезда обозначает, что искомое значение должно появляться где-нибудь в атрибуте. Таким образом, CSS-селектор охватывает yandex.ru, https://yandex.ru/somepage и т.д.

    Но что делать, если ссылка ведет на какой-то сторонних и не связанный ресурс, в адресе которого присутствует yandex? Тогда нужно использовать «^»или «&», для ссылки на начало и конец строки соответственно.

    13. X[href^=»http»]

    Вы никогда не задумывались, как некоторые веб-сайты могут отображать маленький значок рядом с внешними ссылками? Я уверен, что вы видели их прежде, они хорошо запоминаются.

    «^» — наиболее часто используемый в регулярных выражениях символ. Он используется для обозначения начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо использовать CSS-селектор, приведенных выше.

    Обратите внимание, что мы не ищем «https://». Это не правильно, поскольку не учитываются адреса, начинающиеся с https://

    А если мы хотим задать стиль только для ссылок, ведущих на фотографию? Нужно искать конец строки.

    14. X [href$=». JPG»]

    Опять же, мы используем символ регулярного выражения «$» для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит «.jpg».

    15. X[data-*=»foo»]

    Как же нам теперь написать CSS-селектор, который бы выделял ссылки на все виды изображений? Например, мы могли бы написать так:

    Но это геморрой и неэффективно. Другим возможным решением является применение пользовательских атрибутов. Почему бы нам не добавить наш собственный атрибут data-filetype в каждую ссылку?

    Теперь мы можем выделить такие ссылки при помощи данного CSS-селектора:

    16. X[foo

    А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (

    ) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.

    Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.

    Вот, Html-код на месте, теперь напишем стили.

    17. X:checked

    Этот псевдокласс выделяет только элементы пользовательского интерфейса, такие как переключатель или флажок. Причем те, которые отмечены/выбраны. Очень просто.

    18. X:after

    Псевдоклассы :before и :after очень крутые. Создается впечатление, что каждый день появляются новые способы их эффективного использования. Они просто генерируют контент вокруг выбранного элемента.

    Многие познакомились с этими псевдоклассами при работе с clear-fix hack.

    Этот хак использует :after чтобы добавить пробел после элемента, а запретить его обтекание.

    Согласно спецификации CSS3, вы должны использовать два двоеточия (::). Однако, можно использовать и одно двоеточие для совместимости.

    19. X:hover

    Хотите применить стиль к элементу, когда наводите на него мышкой? Тогда этот CSS-селектор для вас.

    Имейте в виду, что старые версии Internet Explorer применяют :hover только к ссылкам.

    Этот CSS-селектор часто используют для того, чтобы поставить border-bottom на ссылки, когда на них наводят мышкой.

    border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;

    • IE6 + (В IE6: hover должен быть применен к ссылке)
    • Firefox
    • Хром
    • Safari
    • Опера

    20. X:not(selector)

    Псевдокласс отрицания бывает очень полезным. Скажем, я хочу выбрать все div, за исключением того, который имеет >

    Или, если бы я хотел выбрать все элементы, за исключением p.

    21. X::псевдоэлемент

    Мы можем использовать псевдо элементы, чтобы оформлять фрагменты элементов, такие как первая строка, или первая буква. Имейте в виду, что они должны быть применены к элементам уровня блока для того, чтобы вступили в силу.

    Псевдо-элемент задается двумя двоеточиями: ::

    Выбираем первую букву в параграфе

    Этот код выберет все параграфы, и в них в свою очередь выберет первые буквы и применит к ним этот стиль.

    Выбираем первую строку в абзаце

    Аналогичным образом благодаря ::first-line мы задаем стиль первой строки в абзаце.

    «Для совместимости с существующими таблицами стилей, браузер должен понимать прежнее обозначения псевдо элементов с одним двоеточием, введенные в CSS 1, 2 (:first-line, :first-letter, :before and :after). Эта совместимость не допускается для новых псевдо-элементов, введенных в этой спецификации» Источник

    22. X:nth-child(n)

    Раньше мы не могли выделить, например, третий дочерний элемент? nth-child решает это!

    Обратите внимание, что nth-child принимает целое число в качестве параметра, однако отсчет ведется не с 0. Если вы хотите выбрать второй пункт списка, используйте li:nth-child(2) .

    Мы даже можем выбрать каждый четвертый элемент списка, просто написав <0>li:nth-child(4n).

    23. X:nth-last-child(n)

    Что делать, если у вас огромный список элементов в ul , а нем нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(397), можно использовать nth-last-child.

    Этот метод почти идентичен приведенному выше, однако отсчет ведется с конца.

    24. X:nth-of-type(n)

    Бывает, что надо выбрать не дочерний элемент, а элемент определенного типа.

    Представьте себе, что на странице пять неупорядоченных списков. . Если вы хотите применить стиль только к третьему ul, не имеющему уникального id, нужно использовать nth-of-type.

    25. X:nth-last-of-type(n)

    Мы можем также использовать nth-last-of-type, отсчитывая элементы с конца.

    26. X:first-child

    Этот псевдокласс выбирает первый дочерний элемент. Часто используется чтобы убрать border в первом и последнем элементе списка.

    27. X:last-child

    В противоположность :first-child :last-child выбирает последний дочерний элемент.

    • IE9 + (Да да, IE8 поддерживает :first-child , но не поддерживает :last-child . Microsoft-у привет! )
    • Firefox
    • Хром
    • Safari
    • Опера

    28. X:only-child

    Вы не часто встретите этот псевдокласс, тем не менее он существует.

    Он позволяет вам выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:

    Будет выбран p только первого div`a, потому что он единственный дочерний элемент.

    29. X:only-of-type

    Очень интересный псевдокласс. Он затрагивает элементы, не имеющие соседей в пределах родительского элемента. В качестве примера выберем ul только с одним элементом в списке.

    Единственное решение заключается в использовании only-of-type .

    30. X:first-of-type

    first-of-type выбирает первый элемент заданного типа. Чтобы лучше понять, посмотрим на пример.

    А теперь попытайтесь понять как выделить пункт 2.

    Решение 1

    Решение 2

    Решение 3

    Мастер Йода рекомендует:  Таймтрекинг стоит ли вести учёт рабочего времени программиста и если да, то как
    Добавить комментарий

    , не будут иметь никакого эффекта этого правила.