Некоторые концепции для новичков Как работают селекторы в CSS


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

Знаете ли вы селекторы?

CSS3-селекторы – фундаментально полезная вещь.

Даже если вы почему-то (старый IE?) не пользуетесь ими в CSS, есть много фреймворков для их кросс-браузерного использования CSS3 из JavaScript.

Поэтому эти селекторы необходимо знать.

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

Основных видов селекторов всего несколько:

  • * – любые элементы.
  • div – элементы с таким тегом.
  • #id – элемент с данным id .
  • .class – элементы с таким классом.
  • [name=»value»] – селекторы на атрибут (см. далее).
  • :visited – «псевдоклассы», остальные разные условия на элемент (см. далее).

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

  • .c1.c2 – элементы одновременно с двумя классами c1 и c2
  • a#id.c1.c2:visited – элемент a с данным id , классами c1 и c2 , и псевдоклассом visited

Отношения

В CSS3 предусмотрено четыре вида отношений между элементами.

Самые известные вы наверняка знаете:

  • div p – элементы p , являющиеся потомками div .
  • div > p – только непосредственные потомки

Есть и два более редких:

p – правые соседи: все p на том же уровне вложенности, которые идут после div .

  • div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть).
  • Почему могут не работать селекторы атрибутов?

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

    Мне нужно в конкретном месте изменить свойства ссылки. Чтобы не нарушать всю эту конструкцию, решаю задать в CSS свойства с помощью селектора атрибутов так

    Здесь всё работает как надо.

    В чём может быть проблема? Что может мешать заданию стиля для конкретного элемента?

    17.04.2013, 19:34

    селекторы атрибутов > и +
    .nav > li + li, .nav:active > .active + li, .nav:active > li + .active < border-left-width: 0;.

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

    Почему контроллер не изменяет атрибутов?
    Здравствуйте. Помогите, пожалуйста, решить проблему. Есть сервлет @RequestMapping(value =.

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

    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 можно по ссылке. После установки в правом верхнем углу у вас должен отобразиться новый значок.

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

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

    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

    CSS Selectors. Виды селекторов

    Язык описания внешнего вида документа CSS постоянно развивается. Со временем растут не только его мощность и функциональность, повышаются также гибкость и удобство использования.

    CSS selectors

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

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

    Синтаксис прост. Чтобы научиться использовать CSS selectors, достаточно прочитать о них. Какой вариант лучше выбрать для контроля контента в вашем случае? Попробуем разобраться.

    Селекторы тэгов

    Это максимально простой вариант, который не требует особых знаний для записи. Чтобы управлять тегами, нужно использовать их название. Предположим, что «шапка» вашего сайта обернута в тег . Для управления ею в CSS нужно использовать селектор header <>.

    Достоинства — простота использования, универсальность.

    Недостатки — полное отсутствие гибкости. В вышеописанном примере будут выбраны сразу все теги header. А что если нужно управлять только одним?

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

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

    Синтаксис таков: указываем точку («.»), после которой пишем название класса. Чтобы управлять первым блоком, используем конструкцию .red. Вторым – .blue и так далее.

    Важно! Рекомендуется использовать понятные значения атрибута class. Дурным тоном считается использование транслита (например, krasiviy-blok) или случайных комбинаций букв/цифр (ojfh834871). В таком коде вы обязательно запутаетесь, не говоря уже о том, с какими трудностями придется столкнуться тем, кто будет заниматься проектом после вас. Оптимальный вариант – использовать какую-нибудь методологию, вроде БЭМ.

    Достоинства — довольно высокая гибкость.

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

    Селектор по ID

    Насчет этого варианта мнения верстальщиков и программистов неоднозначны. Некоторые учебники CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Однако многие специалисты активно расставляют их по всей разметке. Решать вам. Синтаксис таков: символ решетки (« # »), затем имя блока. Например, #red.

    ID отличается от класса по нескольким параметрам. Во-первых, на странице не может быть двух одинаковых ID. Им назначаются уникальные имена. Во-вторых, такой селектор обладает более высоким приоритетом. Это значит, что если вы зададите блоку класс red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим.

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

    Недостатки — легко запутаться в большом количестве ID и class.

    Важно! Если вы пользуетесь методологией БЭМ (или ее аналогами), ID вам, в общем-то, не нужны. Такая техника верстки подразумевает использование уникальных классов, что гораздо удобнее.

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

    Синтаксис: знак зведочки («*») и фигурные скобки, т. е. * <>.

    Используется для назначения определенных атрибутов сразу всем элементам страницы. Когда это может пригодиться? Например, если вы хотите задать странице свойство box-sizing: border-box. Может использоваться не только для управления всеми компонентами документа, но и для контроля всеми дочерними элементами определенного блока, например, div *<>.

    Достоинства — можно управлять большим количеством элементов одновременно.

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

    По атрибутам

    Дают возможность управлять элементом с конкретным атрибутом. Например, у вас есть несколько тегов input с разным атрибутом type. Один из них – text, второй – password, третий – number. Конечно, можно задать каждому классы или ID, но это не всегда удобно. CSS selectors по атрибутам дают возможность указать значения для определенных тегов с максимальной точностью. Например, вот так:

    Этот селектор атрибутов выберет все input с типом text.

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

    Представим, что на вашей странице есть input с атрибутом placeholder=“Введите имя“ и input placeholder=“Введите пароль“. Их также можно выбрать с помощью селектора! Для этого используется следующая конструкция:

    input[placeholder=“Введите имя“]<> или input [placeholder=“Введите пароль“]

    Возможна более гибкая работа с атрибутами. Допустим, у вас есть несколько тегов с похожими атрибутами title (скажем, «каспийский» и «каспийская»). Чтобы выбрать оба, используем следующие селекторы:

    CSS выберет все элементы, в тайтле которых имеются символы «каспийск», т. е. и «каспийский», и «каспийская».

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

    [title^=»нужный вам символ»] <>

    или заканчиваются ими:


    Достоинства — максимальная гибкость. Можно выбирать любые существующие элементы страницы без возни с классами.

    Недостатки — используется относительно редко, только в специфических случаях. Многие верстальщики предпочитают методологии, поскольку указать класс бывает проще, чем расставлять многочисленные квадратные скобки и знаки «равно». Вдобавок, эти селекторы не работают в Internet Explorer версии 7 и ниже. Впрочем, кому сейчас нужны старые Internet Explorer?

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

    Псевдокласс обозначает состояние элемента. Например, :hover – то, что происходит с частью страницы при наведении курсора, :visited – посещенная ссылка. Сюда же входят элементы вроде :first-child и :last-child.

    Этот тип селекторов активно применяется в современной верстке, поскольку благодаря ему можно сделать страницу «живой» без применения JavaScript. Например, вы хотите сделать так, чтобы при наведении на кнопку с классом btn ее цвет менялся. Для этого используем следующую конструкцию:

    Для красоты можно указать в основных свойствах этой кнопки свойство transition, например, в 0,5s – в таком случае кнопка будет краснеть не мгновенно, а в течение полусекунды.

    Достоинства — активно используются для «оживления» страниц. Просты в применении.

    Недостатки — их нет. Это действительно удобное средство. Однако неопытные верстальщики могут запутаться в обилии псевдоклассов. Проблема решается учебой и практикой.

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

    «Псевдоэлементы» – это те части страницы, которых нет в HTML, но ими все равно можно управлять. Ничего не поняли? Все проще, чем кажется. Например, вы хотите сделать первую букву в строке большой и красной, оставив прочий текст маленьким и черным. Конечно, можно заключить эту букву в span с определенным классом, но это долго и скучно. Гораздо проще выделить весь абзац и использовать псевдоэлемент ::first-letter. Он дает возможность управлять внешним видом первой буквы.

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

    Достоинства — дают возможность гибко настраивать внешний вид страницы.

    Недостатки — новички в них часто путаются. Многие селекторы этого типа работают только в определенных браузерах.

    Подведем итог

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

    Как работают “Дочерние селекторы”?

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

    Стиль распространяется на всех потомков, хотя, судя по описанию, он должен распространяться только на детей, а не на внуков или правнуков.

    3 ответа 3

    Нет, вы поняли неправильно.
    Рассмотрим такой пример:

    В случае А правило назначается на потомка первого уровня и наследуется потомком 2-го.
    В случае Б правило назначается на потомков всех уровней.

    Более точные пояснения:

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

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

    Чтобы заработал второй случай, увеличим вес селектора

    CSS селекторы

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

    Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов.

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

    • селектор типа
    • универсальный селектор
    • селекторы атрибутов
    • селектор идентификатора
    • селектор класса
    • псевдо-классы
    CSS селектор Пример Описание CSS
    .class .myClass Выбирает все элементы с классом myClass ( ). 1
    #id #main Выбирает элемент с идентификатором main ( ). 1
    * * Выбор всех элементов. 2
    элемент span Выбор всех элементов . 1
    элемент,элемент div,span Выбор всех элементов

    и всех элементов .

    1
    [атрибут] [title] Выбирает все элементы с атрибутом title . 2
    [атрибут=»значение»] [title=»cost»] Выбирает все элементы с атрибутом title , значение которого в точности совпадает со значением указанным в селекторе ( title=»cost» ). 2
    [атрибут

    =»значение»]

    [title

    =»один»]

    Выбирает все элементы с атрибутом title , в значении которого (в любом месте) встречается подстрока (в виде отдельного слова) «один» ( title=»один и два» ). 2
    [атрибут|=»значение»] [lang|=»ru»] Выбор всех элементов с атрибутом lang , значение которого начинается с «ru». 2
    [атрибут^=»значение»] a[href^=»https»] Выбор каждого элемента с атрибутом href , значение которого начинается с «https». 3
    [атрибут$=»значение»] [src$=».png»] Выбирает все элементы с атрибутом src , значение которого оканчивается на «.png» ( src=»https://puzzleweb.ru/css/some_img.png» ). 3
    [атрибут*=»значение»] [title*=»один»] Выбирает все элементы с атрибутом title , в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) «один» ( title=»один и два» ). 3

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

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

    Список селекторов — это селекторы, перечисленные через запятую.

    Комбинаторы

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

    Комбинатор Пример Описание CSS
    элемент элемент div span Выбор всех элементов внутри

    .

    1
    элемент>элемент div>span Выбирает все дочерние элементы , у которых родитель — элемент
    .
    2
    элемент+элемент div+p Выбирает все элементы

    , которые расположены сразу после элементов

    ol

    Выбор всех элементов

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

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

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

    Псевдо-класс Пример Описание CSS
    :link a:link Выбор всех не посещенных ссылок. 1
    :visited a:visited Выбор всех посещенных ссылок. 1
    :active a:active Выбор активной ссылки. 1
    :hover a:hover Выбор ссылки при наведении курсора мышки. 1
    :focus input:focus Выбор элемента , который находится в фокусе. 2
    :first-child p:first-child Выбор каждого элемента

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

    2
    :lang(язык) p:lang(ru) Выбор каждого элемента

    с атрибутом lang , значение которого начинается с «ru».

    2
    :first-of-type p:first-of-type Выбор каждого элемента

    , который является первым из элементов

    своего родительского элемента.

    3
    :last-of-type p:last-of-type Выбор каждого элемента

    , который является последним из элементов

    своего родительского элемента.

    3
    :only-of-type p:only-of-type Выбор каждого элемента

    , который является единственным элементом

    своего родительского элемента.

    3
    :only-child p:only-child Выбор каждого элемента

    , который является единственным дочерним элементом своего родительского элемента.

    3
    :nth-child(n) p:nth-child(2) Выбор каждого элемента

    , который является вторым дочерним элементом своего родительского элемента.

    3
    :nth-last-child(n) p:nth-last-child(2) Выбор каждого элемента

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

    3
    :nth-of-type(n) p:nth-of-type(2) Выбор каждого элемента

    , который является вторым дочерним элементом

    своего родительского элемента.

    3
    :nth-last-of-type(n) p:nth-last-of-type(2) Выбор каждого элемента

    , который является вторым дочерним элементом

    своего родительского элемента, считая от последнего дочернего элемента.

    3
    :last-child p:last-child Выбор каждого элемента

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

    3
    :root :root Выбор корневого элемента в документе. 3
    :empty p:empty Выбор каждого элемента

    , который не содержит дочерних элементов (включая текст).

    3
    :target :target Выбор текущего целевого элемента на странице, то есть элемента, к которому был осуществлён переход по ссылке внутри страницы. 3
    :enabled input:enabled Выбор каждого включенного элемента . 3
    :disabled input:disabled Выбор каждого выключенного элемента . 3
    :checked input:checked Выбор элемента , выбранного по умолчанию или пользователем. 3
    :not(селектор) :not(p) Выбор всех элементов, кроме элемента

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

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

    Селекторы в CSS

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

    Что такое CSS селекторы и каскадность?

    CSS селектор — это часть правила, с помощью которого можно выбирать элемент в HTML/XHTML/XML документе. Выбранный элемент можно оформить с помощью различных свойств (стилей) CSS.

    Для начала обусловимся:

    Под словом «селектор» подразумевается один CSS селектор: div , #content , :hover ;

  • Под словом «CSS правило» (далее просто «правило») подразумевается комбинация селекторов: #content .text p .
  • Приоритеты и каскадность

    Прежде чем разбирать селекторы, важно знать главный принцип CSS — каскадность (Cascading Style Sheets — каскадные таблицы стилей). Каскадность — это приоритет одних правил (стилей) над другими.

    При вычислении приоритета в браузере, каждый селектор получает баллы, затем баллы складываются. Так css-правило получает «вес». В итоге, элемент получит стили самого «весомого» правила.

    внутри элемента .text получит стиль color:red; , а не color:blue; , потому что приоритет выше (111, а не 11).

    Если несколько css-правил с одинаковым весом влияют на один элемент, то элемент получит стили правила, которое ближе к концу HTML страницы (ниже в коде).

    Какой селектор какие баллы получает:

    Тип селектора Описание селектора Баллы
    \* универсальный селектор
    div тег 1
    :first-letter псевдо-элемент 1
    [атрибут=»значение»] селектор атрибута 10
    .text класс 10
    :hover псевдо-класс 10
    #content селектор по id 100
    style=»color:red;» атрибут style 1000
    !important добавка к значению 10000

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

    Приоритеты при медиа запросах

    Медиа запросы, например: @media ( max-width:500px ) < >не участвуют в подсчете приоритета и всегда должны располагаться ниже всех остальных правил, чтобы перебивать предыдущие, когда срабатывает указанное медиа условие.

    Неправильно: потому что так медиа запрос всегда имеет меньший приоритет и вообще не будет работать:

    Все селекторы CSS (коротко)

    Такие селекторы указываются в HTML документе (их можно увидеть в исходном коде страницы).

    Селектор Пример Описание
    * * Все элементы. Кроме псевдо-элементов.
    .class .myclass Элемент с .
    #id #main Элемент с .
    HTML тег span Элемент .
    [атрибут] [title] Элементы с атрибутом title .
    [атрибут = значение] [title=»cost»] Элементы с атрибутом title=»cost» .
    [атрибут

    = значение]

    [title

    =»cost»]

    Элементы с атрибутом title , в значение которого есть cost окруженное или нет пробелом ‘ «’: cost , cost foo , foo cost«
    [атрибут ^= значение] [src^=»http»] Элементы с атрибутом src , значение которого начинается с http .
    [атрибут $= значение] [src$=».png»] Элементы с атрибутом src , значение которого заканчивается на .png .
    [атрибут *= значение] [src*=»kama»] Элементы с атрибутом src , в значении которого присутствует ‘ kama ‘.


    есть еще селектор: [атрибут |= значение] . Пример: [lang |= ru] — элементы с атрибутом lang, значение которого равно ru или начинается с ru-, например «ru-RU». Но он практически не используется и его заменяет комбинация: [lang = ru], [lang ^= ru-] .

    Не указывается в разметке HTML-документа. Иногда динамичны — срабатывают при определенном условии (наведение курсора на элемент). Начинаются с двоеточия ‘ : ‘.

    Псевдо-класс Пример Описание
    :link a:link Выбор всех не посещенных ссылок.
    :visited a:visited Выбор всех посещенных ссылок.
    :active a:active Выбор активной ссылки.
    :hover a:hover Выбор ссылки при наведении курсора мышки. Вместо « может быть любой элемент
    По расположению на одном уровне
    :first-child *:first-child Любой первый элемент в блоке.
    :last-child *:last-child Любой последний элемент в блоке.
    :only-child *:only-child Любой элемент в блоке, если там всего один элемент.
    :nth-child(n)
    *:nth-child(2) Любой второй элемент в блоке.
    *:nth-child(2n) Любые элементы в блоке по счету: 2, 4, 6, … (чётные).
    *:nth-child(even) Любые элементы в блоке по счету: 2, 4, 6, … (чётные).
    *:nth-child(2n+1) Любые элементы в блоке по счету: 1, 3, 5, … (нечётные).
    *:nth-child(odd) Любые элементы в блоке по счету: 1, 3, 5, … (нечётные).
    *:nth-child(3n+2) Элементы номер 2, 5, 8 и так далее.
    Наглядно Посмотреть как это работает →
    :nth-last-child(n) *:nth-last-child(2) Любой второй элемент в блоке с конца.
    По расположению на одном уровне с тем же тегом
    :first-of-type p:first-of-type Выбор первого дочернего элемента

    .

    :last-of-type p:last-of-type Выбор последнего дочернего элемента

    .

    :only-of-type p:only-of-type Выбор дочернего элемента

    , если у родителя элемент

    всего один.

    :nth-of-type(n) p:nth-of-type(2) Выбор второго дочернего элемента

    .

    :nth-last-of-type(n) p:nth-last-of-type(2) Выбор второго дочернего элемента

    с конца.

    Поля форм
    :enabled input:enabled Выбор включенного . Обычно «:enabled« просто не пишется.
    :disabled input:disabled Выбор выключенного .
    :focus input:focus Выбор , который находится в фокусе (в который установлен курсор).
    :checked input:checked Выбранный элемент типа radio или checkbox.
    Остальные
    :root :root Выбор корневого элемента в документе.
    :empty p:empty Пустой элемент

    , в котором нет ни текста ни элементов.

    :lang(язык) p:lang(ru) Выбор элемента

    с атрибутом lang, значение которого начинается с «ru».

    :target :target Выбор активного элемента на странице, который имеет якорную ссылку.
    :not(селектор) :not(p) Выбор всех элементов, кроме

    .

    • Актуальную поддержку браузеров для CSS3 селекторов смотрите по этой ссылке.

    меню

    Элементы, которых реально не существуют в HTML документе. Начинаются с двойного двоеточия :: , но можно и с одинарного : .

    Псевдо-элемент Пример Описание Подд. / CSS
    ::first-letter p::first-letter Выбирает первую букву элемента

    .

    100% / 1
    ::first-line p::first-line Выбирает первую строку элемента

    .

    100% / 1
    ::before p::before Вставляет указанное в content:» содержимое в начало

    .

    100% / 2
    ::after p::after Вставляет указанное в content:» содержимое в конец

    .

    100% / 2
    ::selection p::selection Оформит выделенный (мышкой) текст внутри

    . Для firefox нужен префикс moz ( p::-moz-selection )

    71.41% / 3

    меню

    Для объединения селекторов, используются символы комбинаторы: , > , + ,

    , , . Они устанавливают взаимосвязь между селекторами.

    Комбинатор Пример Описание Подд. / CSS
    правило, правило div a, span i Элемент внутри

    и элемент внутри .

    100% / 1
    селекторСелектор .c1.c2 Элементы одновременно с двумя классами c1 и c2 . 100% / 1
    селектор селектор div span Элемент внутри
    .
    100% / 1
    селектор > селектор div > span Элементы , у которых родитель
    .
    100% / 2
    селектор + селектор div + p Один элемент

    , который находится сразу после

    p

    Все элементы

    , которые находятся сразу после

    Все селекторы CSS (подробно)

    Выбирает абсолютно все элементы на странице: «a, ul, li, div и т.д. Можно использовать для сброса стилей всех элементов. Например, такой код обнуляет внутренние и внешние отступы у всех элементов:

    * можно использовать в связке с другими селекторами. Например, сделаем так чтобы все дочерние элементы #container выделялись сплошной черной рамкой шириной 1px.

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

    Выбирает элемент у которого есть атрибут class с указанным значением: .

    Название класса, может состоять из латинских букв (a-zA-Z), цифр (0-9), символа дефиса и подчеркивания (- _).

    Следующий код устанавливает красный цвет текста для всех элементов с классом error —

    У одного элемента может быть несколько классов (через пробел):

    Выбирает элемент у которого есть атрибут id с указанным значением: .

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

    Идентификатор должен состоять из латинских букв (a-zA-Z), цифр (0-9), символа дефиса или подчеркивания: — _ . Начинается он только с буквы!

    Следующий код устанавливает ширину и отступ элемента с идентификатором:

    Селектор по ID имеет больший приоритет над селектором по классу (см. начало статьи). Поэтому по возможности получайте элемент по селектору класса, это считается правилом хорошего тона и позволит при необходимости без лишних усилий «перебить» стили.

    Селектор HTML тега. Применяться ко всем указанным элементам в документе. Часто используется для задания цвета, фона, шрифта и др.

    Следующий код задает цвет текста для всех ссылок и отступы для UL списков:

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

    Например, следующий код выбирает любой элемент , являющийся потомком элемента

  • : (
  • текст ):

    Это правило можно сочетать с идентификаторами и классами: body.opera a < color:blue; >.

    a:link, a:visited, a:hover, a:active

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

    Все непосещенные ссылки будут красные, а посещенные фиолетовые, а при наведении станут зеленые, а при нажатии на ссылку голубые.

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

    Например, следующий код устанавливает красный цвет текста в абзаце p, который расположен сразу после div :

    Выбирает все элементы Y, которые расположены после X на одном уровне. По поведению похож на X + Y. Разница в том, что будут выбраны все следующие элементы, а не только первый.

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

    Окрасит «текст 2» и «текст 3»:

    Выбирает элементы Y, которые являются дочерними к X, но выбирается только первый уровень дочерних элементов.

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

    Это правило не коснется

      .

    Селектор атрибутов. Выбирает элементы, которые содержат указанный атрибут.

    Например, следующий код меняет цвет ссылки при наличии в элементе a атрибута title :

    Окрасит только «текст»:

    Селектор атрибутов с точным значением. Выбирает элементы, у которых имеется атрибут с указанным значением.

    Например, следующий код меняет цвета ссылки на сайт «site.ru»:

    Окрасит только «текст»:

    Селектор атрибутов с плавающим значением. В следующем примере, символ «*» говорит селектору о том, что нужное значение может быть в любом месте атрибута href у тега a :

    Окрасит «текст» и «текст 2»:

    Для уточнения выбора можно использовать указатели » ^ » (в начале строки), » & » (в конце строки) или «

    » (точное значение через пробел). См. ниже.

    Это другое применение селектора атрибутов со плавающим значением (см. выше).

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

    А можно все это сократить до одного правила, но для этого у каждого элемента должен быть один и тот же атрибут: data-filetype=»image» . Например все ссылки в HTML имею этот атрибут:

    Тогда все ссылки на картинки можно выбрать так:

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

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

    Это css-правило установит фоновую картинку только для «текст»:

    Рекомендуется не добавлять к параметру вышеуказанного поиска дополнительных символом, так как искомая ссылка может начинаться с «https».

    Селектор атрибутов со значением в конце. «$» — означает конец строки.

    Например, выделим элементы, которые ссылаются на файлы определенного расширения. Следующий код выберет ссылки a , ссылающиеся на изображения формата .jpg :

    Окрасит только «текст»:

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

    Выбирает элемент у которого в значении атрибута foo есть bar . Он чем-то похож на *= , но если *= ищет указанную строку bar в любом месте значения атрибута, то

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

    Например такой css код:

    Об этом селекторе не многие знают, а ведь он иногда очень удобен.

    Селектор псевдоклассов. Выделяет активный якорь в HTML. Допустим у нас ссылка ссылается на внутренний якорь на странице, тогда при клике по этой ссылке этот селектор выделить элемент имеющий атрибут .

    Селектор псевдоклассов. Стилизует включенные radio или checkbox. Обычно применяется для выделения текста. Может использоваться с input или option или просто без них: input:checked , option:checked или :checked .

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

    Селектор псевдоэлементов. Добавляет элемент в начало X (внутрь тега). Работает только совместно со свойством content , которое указывает содержание добавленного элемента. content нужно указывать даже если содержание пустое ( content:» ), т.к. элемент должен хоть что-то содержать.

    Когда-то все браузеры реализовали эти псевдоэлементы с одним двоеточием: :after/:before.
    Стандарт с тех пор изменился и сейчас все, кроме IE8, понимают также современную запись с двумя двоеточиями. А для IE8 нужно по-прежнему одно.


    Например с помощью таких стилей, можно указать значок для LI списка:

    Селектор псевдоэлементов. Добавляет элемент в конец X (внутрь тега). Работать только совместно со свойством content , которое указывает содержание добавленного элемента. content нужно указывать даже если содержание пустое ( content:» ), т.к. элемент должен хоть что-то содержать.

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

    Селектор псевдокласса. Срабатывает только при наведении мышки на элемент, когда курсор над элементом. Может применяться для любых элементов ( div, span ) не только ссылок .

    В следующем примере при наведении мышкой под ссылкой будет появляться черная линия толщиной 1px (замена свойству underline):

    А в следующем коде показано изменение цвета фона при наведении на элемент

    Селектор псевдокласса. Выбирает элементы, которые не содержат указанного селектора. Вместо «selector» может быть любой селектор, кроме псевдоэлементов ( :first-letter ). Двойное отрицание запрещено — :not(:not(. )) .

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

    А в этом примере выбираются все элементы li , у которых нет класса .last :

    Выберет «элемент 1» и «элемент 2»:

    Селектор псевдоэлементов. ::first-line стилизует начальную строку.
    ::first-letter стилизует начальную букву. Изменяются только шрифт, цвет текста, фон, а также сильно привязан к множеству параметров: ширина окна браузера, язык, шрифт и т.п.

    С CSS 2.1, для различия, принято псевдоэлементы помечать двойным двоеточием «::», а псевдоклассы одинарным «:».

    Эти селекторы можно записывать с одним двоеточием :first-line , но двойное ::first-line предпочтительнее.

    В следующих примерах показано, как использовать указанные псевдоэлементы:

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

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

    #2 Выбираем первую строку в абзаце

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

    Выбирает каждый «n-ый» элемент Х, который находится на одном уровне с X. Считает все элементы на уровне X, т.е. любой тип, а не только тип X.

    Под типом подразумевается именно тег элемента (div, span, li), а не его класс или что-то еще.

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

    • odd (нечетные),
    • even (четные),
    • число (порядковый номер с 1)
    • и выражение (an+b, a и b целые числа, n — счетчик от 0).
    • смотреть на примере >

    n — odd или even

    Раскрасим четные и нечетные параграфы в разные цвета:

    n — число

    Установит красным цветом второй элемент:

    Окрасит «Второй параграф.»:

    n — выражение

    Формула выражения: an + b , где «a» — число, которое будет умножаться на n, «n» — счетчик от 0-999, «b» — число, отступ.

    в селекторе :nth-child(2) указана только «а».

    :nth-child(odd) можно заменить на :nth-child(2n+1) — 1, 3, 5, 7 .

    :nth-child(even) можно заменить на :nth-child(2n) — 2, 4, 6, 8 .

    :nth-child(3n+4) — 4, 7, 10, 13 .

  • :first-child можно заменить на :nth-child(0n+1) или :nth-child(1)
  • Например: обратимся к каждому третьему элементу на текущем уровне, где расположены p:

    Выбирает начиная с конца. Работает точно также как и предыдущий :nth-child(n) только отсчет идет не сверху, а снизу.

    Также вместо n может быть:

    • odd — нечетные
    • even — четные
    • число — порядковый номер с 1
    • выражение an+b , где a и b целые числа, n — счетчик от 0 до 999).

    Например, следующий код установит красным цветом второй с конца параграф:

    Окрасит «Второй параграф.»:

    Еще примеры смотрите в предыдущем селекторе :nth-child(n) .

    Выбирает элемент по номеру указанному в «n». Начинает отсчет от первого элемента типа X находящегося на одном уровне.

    Под типом подразумевается именно тег элемента (div, span, li), а не его класс.

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

    • odd — нечетные
    • even — четные
    • число — порядковый номер с 1
    • выражение an+b , где a и b целые числа, n — счетчик от 0 до 9999.

    #1 n — add или even

    Раскрасим четные и нечетные параграфы в разные цвета. Считает именно параграфы без h1, как это делает :nth-child :

    #2 n — число

    Установит красным цветом второй элемент:

    Окрасит «Второй параграф.»:

    #3 n — выражение

    Формула выражения: an + b , где «a» — число, которое будет умножаться на n, «n» — счетчик от 0-999, «b» — число, отступ.

    в селекторе :nth-of-type(2) указана только «а».

    :nth-of-type(odd) можно заменить на :nth-of-type(2n+1) — 2, 4, 6, 8 .

    :nth-of-type(even) можно заменить на :nth-of-type(2n) — 1, 3, 5, 7 .

    :nth-of-type(3n+4) — 4, 7, 10, 13 .

  • :first-of-type можно заменить на :nth-of-type(0n+1) или просто :nth-of-type(1)
  • Например: обратимся к каждому третьему элементу p на текущем уровне, где расположены p:

    Селектор псевдокласса. Выбирает элемент по номеру указанному в «n». Начинает отсчет от последнего элемента X находящегося на одном уровне.

    Это такой же селектор как и предыдущий :nth-of-type(n) только считает наоборот, с конца.

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

    Еще примеры смотрите в предыдущем селекторе :nth-of-type(n) .

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

    X:first-child это тоже самое что X:nth-child(1)

    #1 Пример: обратимся к первому элементу в блоке #container

    А вот так не выделит ничего:

    #2 Обнуление границы

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

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

    Селектор псевдокласса. Выбирает первый с конца элемент который находится на одном уровне с Х. Отсчет начинается с любого элемента не обязательно X.

    X:last-child это тоже самое что X:nth-last-child(1)

    #1 Пример: обратимся к первому с конца элементу в блоке #container

    А вот так ничего не выделит:

    #2 Покрасим последний элемент li в списке ul в зеленый:

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

    X:first-of-type это тоже самое что X:nth-of-type(1)

    #1 Пример: обратимся к первому элементу div в блоке #container

    #2 Обнуление границы

    :first-of-type часто используется для обнуления свойства border на граничных элементах списка:

    X:only-child (если один элемент в блоке)

    Селектор псевдокласса. Выбирает элемент X, который единственный на уровне X. При подсчете элементов название тега X НЕ учитывается.

    Другими словами: выбирает дочерние элементы X только, когда у родителя количество всех дочерних элементов (неважно какой тип) равно 1.

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


    X:not(:only-child) (если больше чем один элемент в блоке)

    Чтобы выбрать все элементы блока, только в том случае, если в этом блоке всего больше чем один элемент, используем :only-child с отрицанием :not() :

    В результате если у нас один элемент он выбран не будет:

    А если больше одного, то будут выбраны все:

    X:only-of-type (если один элемент типа X в блоке)

    Селектор псевдокласса. Выбирает элемент X, который единственный на уровне X (не имеет соседей). При подсчете элементов название тега X учитывается.

    Другими словами: выбирает дочерние элементы X только, когда у родителя количество всех дочерних элементов типа X равно 1.

    #1 Выберем ul только с одним элементом в списке.

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

    #1 Сложное выделение

    У нас есть такой код:

    Как обратиться к «Список 2»?

    Решение 1

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

    Решение 2

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

    Браузер находит ul, следующий сразу за p, затем находит его последний дочерний элемент.

    Решение 3

    Это решение пожалуй самое правильное, потому что если между ul или li попадут другие теги, этот пример все равно будет выбирать нужный нам li:

    Браузер выбирает первый ul (именно ul), затем находит первый с конца элемент li (именно li).

    Наглядное пособие по селекторам типа :nth-child

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

    Считаем элементы в блоке с помощью nth-child

    Полезная статья на Хабре — количественные CSS селекторы, учит считать элементы с помощью nth-child . Например, нужно выделить первый элемент, только, если в блоке 6 элементов указанного типа. Или, нужно выделить все элементы блока, если в блоке всего 6 элементов.

    Диапазон элементов в селекторе

    Допустим, у вас есть список из 20 элементов и нужно выбрать элементы с 7 по 14 включительно. Это можно сделать вот так:

    CSS: селекторы

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

    Повторим немного то, что уже раскрывалось в теме «Синтаксис CSS». Итак, — это элемент, к которому применяется объявление в правиле стиля.

    Термины, используемые в описании правил CSS.

    Рис.1. Обычное правило CSS.

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

    Рис.2. Пример правила CSS.

    Коротко про синтаксис записи правил CSS:

    • Объявление стиля в парвиле берётся в фигурные скобки — <>
    • Свойство и значение в объявлении разделяются двоеточием — :
    • В одном объявлении (в одной паре фигурных скобок) может быть указано сколько угодно пар свойство: значение
    • В конце каждой пары свойство: значение ставится точка с запятой — ;
    • После последней пары свойство: значение точку с запятой ставить не обязательно.
    • Синтаксис CSS не чувствителен пробельным символам (пробелы, табуляция, переносы сток).
    • Синтаксис CSS не чувствителен к регистру символов.

    В качесте селекторов может выступать любой тег HTML, также есть селекторы класса либо id-селекторы. Рассмотрим всё по порядку.

    Селекторы тегов

    Как писалось ранее, любой тег может быть селектором в правиле CSS. Рассмотрим пример.

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

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

    Такая запись стиля равносильна следующей группе правил:

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

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

    внутри таблицы

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

    во всех таблицах документа будут отображать цвет красным цветом. Обратите внимание, то тег

    находящийся внутри тега

    На самом деле, вместо

    можно было указать тег

    , так как тег

    всегда должен содержать тег

    Смежный (соседний) селектор

    Селектор смежного элемента выбирает элемент, расположенный непосредственно за другим заданным элементом. Синтаксис этого селектора: селектор предыдущего элемента, знак «+» и за ним селектор выбираемого элемента.

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

    , желательно увеличить верхний отступ (свойство margin-top ). Отступ в 20px будет придавать тексту читабельности. Но вот в случае, если тег

    идёт сразу после

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

    будет лишним. Решить такую задачу можно при помощи селектора смежного элемента.

    Вот html-код с примером работы селектора смежного элемента.

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

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

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

    » (тильда) и за ним селектор выбираемых элементов.

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

    Из примера видно, что после

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

    Если в селекторе правила CSS указан символ «*», то это правило применяется ко всем элементам страницы без исключения. Сложно представить себе случай, когда такое правило имеет смысл. Но есть один случай когда разработчик хочет «обнулить» все внешние и внутренние отступы. Тогда нужно использовать такой стиль:

    Но символ «*» можно использовать в составных селекторах.

    Этот код назначает красный цвет тексту всех потомков элемента

      .

    Классы

    Классы в CSS — самый расрпостранённый способ назначения стиля группе элементов. Класс применяют когда нужно задать разные стили элементам html-документа, созданным одним тегом. Синтаксис класса:


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

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

      , этим трём меню нужно создать три различных стиля. В CSS создают три класса ul.menu-top , ul.menu и ul.menu-bottom .

    В теле html-документа различные меню создаются с указанием класса в атрибуте class :

    Классы — часто используемы инструмент CSS. Он удобен и, кроме того, делает код стиля более читаемым.

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

    Эту запись можно сократить, убрав символ «*».

    ID селекторы (идентификаторы)

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

    При описании идентификатора вначале указывается символ решётки (#), затем идет имя идентификатора.

    Также, как и имя класса, имя идентификатора должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_).

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

    В HTML есть ряд тегов, которые в зависимости от атрибутов меняют своё действие. Например, тег зависимости от значения атрибута type может создавать поле формы, кнопку и другие элементы формы. Так что, если применять стиль к селектору input , то он изменит все элементы формы, созданные этим тегом. Для точного управления такими элементами в CSS существуют селекторы атрибутов.

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

    Селекторы атрибутов — тема отдельной большой статьи. В рамках этой статьи мы лишь отметим, что они есть.

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

    Ещё одна большая тема в CSS — псевдоклассы. Приставка «псевдо» обозначает мнимость или ложность. Дело в том, это элементы html документа меняются в зависимости от действий пользователя. Например ссылка меняется в зависимости от наведения на неё курсора.

    При помощи псевдоклассов создаются динамические эффекты на странице.

    Можно применять псевдоклассы к селекторам идентификаторов или классов ( ul.menu:hover < color : green >).

    Для новичков отмечу: если именам классов и идентификатов разработчик придумывает названия сам, то имена псевдоклассов в CSS — это зарезервированные слова.

    Псевдокласс :active выполняет правило стиля, если элемент активен. Например, на ссылку наведён курсор и произведён клик. Псевдокласс :hover — курсор мыши просто наведён на элемент, например на ссылку.

    Есть ещё много псевдоклассов. Полностью раскрыть тему псевдоклассов можно в рамках отдельной статьи. Тут мы коснулись её лишь поверхностно.

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

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

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

    Синтаксис псевдоэлементов такой же, как и у псевдоклассов:

    Некоторые концепции для новичков: Как работают селекторы в CSS

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

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

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

    Популярное

    • Главная
    • ->
    • Материалы
    • ->
    • 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

    Мастер Йода рекомендует:  Накрутка instagram аккаунта - для чего она нужна
    Добавить комментарий
    .

    Для дальнейшего изучения селекторов CSS нужно освоить несколько несложных терминов относящихся к структуре документа.

    Дерево документа

    (англ. document tree) — это схема построения HTML документа, показывающая порядок следования тегов и их вложенность друг в друга. Приведём пример такой схемы:

    Дерево документа наглядно показывает связи в HTML документе, порядок следования тегов и их вложенность. Его используют разработчики для написания CSS стилей и JavaScript сценариев.

    Вот пример кода, соответствующего схеме дерева элементов с рисунка 1.

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

    Теперь рассмотрим все типы связей.

    Предки и потомки

    (ancestor) — элементы, которые содержат другие элементы, то есть элемент является предком для всех вложенных в него элементов.

    (descendant) — элементы, вложенные в другой элемент.

    Селекторы потомков уже были рассмотрены выше.

    Родители и дочерние элементы

    (parent) — это предок первого уровня (непосредственный предок) для элемента. (child — ребёнок) — это потомок первого уровня. Родительский элемент может иметь неограниченное число детей.

    В нашем дереве элементов у тега следующие дочерние элементы:

    Братские или сестринские элементы

    , (англ. siblings — братья и сестры), группа элементов имеющая общего родителя. Например, теги

    — сестринские, так как у них общий родитель .

    Смежные элементы

    Смежные элементы — это соседние братские элементы, то есть элементы имеющие общего родителя и идущие радом в дереве элементов. В нашем примере смежными элементами будут пары:

    Теперь вернёмся к селекторам.

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

    Когда нас интересуют не все потомки, а только потомки первого уровня, то есть дочерние элементы, в CSS используют дочерние селекторы. Для указания того, что правило стиля задано только к дочернему элементу, в селекторе используется символ «>».

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

    родитель, а тег

    предок.