Какие действия возможны над селекторами в css

Руководство по продвинутым CSS-селекторам. Часть 1

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «Guide to Advanced CSS Selectors — Part One».

Photo by Brienne Hong on Unsplash

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

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

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

Специфичность и каскад CSS

Чтобы успешно работать с селекторами в CSS, нужно разобраться в некоторых ключевых концепциях. Первая — это специфичность, а вторая — каскад (в «CSS» каскад, собственно, представлен буквой «C»).

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

Правильное использование каскада и специфичности селекторов позволит вам полностью избежать использования !important в ваших таблицах стилей.

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

Маленький пример. Какого цвета будет .item ?

.item будет красным, потому что специфичность id-селектора выше, чем у каскада и селектора элемента.

Это не означает, что нужно добавлять #id ко всем вашим элементам и селекторам, но знать об их влиянии на специфичность нужно.

Ключевая идея: чем выше специфичность, тем сложнее перекрыть правило.

В каждом проекте свои нужды по части повторного использования правил. Желание делиться правилами с низкой специфичностью привело к подъему фреймворков, таких как Tailwind и Bulma.

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

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

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

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

Photo by Dan Burton on Unsplash

Универсальный селектор — * — называется так потому, что применим ко всем элементам.

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

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

Применение универсального селектора на практике
Сброс блочной модели CSS

Чаще всего я использую универсальный селектор в самом первом правиле для сброса CSS:

Этот код означает, что мы хотим, чтобы padding и границы во всех элементах входили в блочную модель, а не добавлялись к заданным размерам. Например, согласно следующему правилу, .box будет иметь ширину 200px, а не 200px + 20px padding -а.

Вертикальный ритм

Еще один очень полезный вариант применения универсального селектора был предложен Энди Беллом и Хейдоном Пикерингом в их книге и на их сайте Every Layout. Этот способ называется «стек» и в самой простой форме выглядит так:

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

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

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

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

Photo by Vinicius «amnx» Amano on Unsplash

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

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

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

Этот селектор выберет все элементы, имеющие класс, в имени которого содержится строка «component_». То есть, будут захвачены и component_title , и component_content .

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

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

Таким образом можно выбрать все ссылки a , имеющие любое значение класса.

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

Применение селекторов атрибутов на практике
Подчистка кода для улучшения доступности

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

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

Применение к aria для принудительного обеспечения доступности

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

Например, при реализации аккордеона, где вам нужно включить следующую кнопку независимо от того, переключается ли логическое значение aria при помощи JavaScript:

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

Стилизация не-кнопочных ссылок навигации

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

Удаление стиля списка по умолчанию

Еще один совет от Энди Белла. Можно удалить стилизацию списка, основываясь на наличии атрибута role :

Дочерний комбинатор

Photo by ketan rajput on Unsplash

«Некоторые селекторы называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе», — MDN.

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

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

  • article p захватывает все p внутри article ,
  • article > p захватывает только абзацы, которые являются прямыми потомками article и не вложены в другие элементы.

Абзац захватывается article > p

Абзац не захватывается article > p

Применение дочернего комбинатора на практике
Многоуровневый список ссылок для навигации

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

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

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

Определение области видимости для селекторов элементов

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

В этом случае можно использовать не просто footer , а body > footer .

Стилизация встроенного (стороннего) контента

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

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

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

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

Photo by Charles Jackson on Unsplash

Общий родственный комбинатор —

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

img захватит все изображения, находящиеся где-нибудь после абзаца, если у них с абзацем общий родитель.

Это означает, что здесь изображения будут выбраны:

А здесь не будут:

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

Применение общего родственного комбинатора на практике
Визуальная передача смены состояния

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

Допустим, у нас есть чекбокс со следующим HTML:

При помощи общего родственного комбинатора мы можем изменять стиль абзацев соглашения, только если чекбокс был отмечен:

Вариации с низкой специфичностью

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

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

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

Можете поэкспериментировать с применением общего родственного комбинатора в CodePen.

Это правило имеет очень низкую специфичность, так что вы легко его перекроете добавлением какого-нибудь более направленного правила.

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

Чтобы лучше в этом разобраться, попробуйте завернуть контент элемента последней карточки в div . Цвет и margin будут наследоваться элементами div и type , но нативные стили браузера на h3 не позволят унаследовать размер шрифта от общего родственного комбинатора. Нативное правило браузера имеет более высокую специфичность, чем универсальный селектор, который технически нацелен на div .

Соседний родственный комбинатор

Photo by Jametlene Reskp on Unsplash

Соседний родственный комбинатор — + — захватывает элементы, идущие сразу за указанным элементом.

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

Применение соседнего родственного комбинатора на практике
Полифил для эмуляции gap в навигации

Поддержка gap во Flexbox скоро будет, но на момент написания статьи ее еще нет в Safari.

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

Это сделает возможным gap -эффект между элементами списка без необходимости убирать дополнительный margin для первого:

Применение интервала между метками формы и входными данными

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

В этом случае мы добавляем намного меньший margin между меткой и ее входящими данными, и больший margin между входящими данными и метками:

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

Прокачиваем навыки работы с CSS селекторами

Работа с CSS селекторами это важный момент любой части Front-end разработки. Чем лучше вы их знаете, тем больше времени вы экономите себе и своим коллегам.

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

Зачем нам глубоко это знать? Мы уже все хорошо знаем селекторы, верно? Но проблема тут в том(в моём случае), что со временем можно привязаться к использованию одного и того же проверенного набора CSS селекторов на каждом проекте, чтобы достигнуть того, что нам нужно сделать.

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

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

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

Готовы прокачаться в плане CSS селекторов? Ок, поехали.

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

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

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

Селектор прямого потомка A > B

Смежный селектор A + B

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

Смежный селектор A + B должен уже быть вам знаком, он выбирает элемент B, который идет сразу после A. Но что по поводу родственного селектора A

B ? Он выбирает все родственные элементы, которые идут после A. Вот их пример:

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

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

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

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

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

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

Он выбирает элементы <button> , которые содержат атрибут icon. Он выберет атрибут в не зависимости пустой или и имеет какие-то значения. Вот несколько примеров:

Первая ссылка не имеет атрибута target , так что её не выбираем. Следующие две ссылки выбираются, так как у них есть пустой атрибут target или один со значением, это не важно. И под конец, последняя ссылка становится розовой, так как выбирается из-за наличия атрибута fluffy . Её значение нерелевантно и просто должно быть само по себе, чтобы селектор a[fluffy] его выбрал.

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

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

A[attr^=val] Атрибуты, которые начинаются со значения val.

A[attr|=val] Атрибуты, которые начинаются со значения val или он первый в списке, разделенном тире.

A[attr*=val] — Значение появляется везде в атрибуте.

=val] — Значение является одним из разделенным пробелом.

Первые два примера очень схожи, кроме A[attr|=val] , который также выбирает значения разделенные тире. Именно это может быть полезно для выбора языковых атрибутов. Как пример <p lang=“en-us”> .

Выбор расширений файлов становится очень простым с A[attr$="val"] , а в купе с ::after вы можете легко показать совпавшие файлы. Не используя attr() и конкатенацию для совмещения их со строкой.

Со значением A[attr*val] вы можете показать любой домен, не зависимо от того, какой протокол он использует или какой субдомен у него.

И на последок, у нас есть A[attr

=val] , который отлично подходит для выбора значений в атрибутах, состоящих их списка значений, разделенных пробелами. Он выбирает только целое слово, а не фрагмент, как *= оператор, так что много множества слов выбраны не будут.

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

Большинство основных браузеров поддерживает выборку чувствительную к регистру, кроме Internet Explorer и Microsoft Edge.

Селекторы пользовательского интерфейса

Если вы работали над стилизацией форм, то вы без сомнений встречали эти типы псевдо-классов:

Для примера, мы можем использовать :checked для стилизации простого to-do списка.

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

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

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

:optional (не обязательно)

Если вы начнете писать в форму ввода адреса электронной почты, то потом оно должно стать валидным. Однако, форма ввода рабочего адреса всегда нужна и должна быть валидной, так что мы не можем оставить её пустой. Обратите внимание на то, как мы можем связывать псевдо-классы ( :required:invalid ), чтобы достигнуть того, что нам нужно.

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

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

Завершая эту секцию, давайте взглянем на :ready-only , :read-write и :placeholder-shown .

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

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

Структурные селекторы

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

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

Для примера :nth-child() получает значение, которое будет соответствовать конкретному дочернему элементу, относительно его родительского контейнера.

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

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

ul:nth-child(2) — Выберет второй дочерний элемент

ul:nth-child(4n) — Выберет каждый четвертый дочерний элемент (4, 8, 12, …)

ul:nth-child(2n + 1) — Выберет каждый второй дочерний элемент, начиная с первого (1, 3, 5, …)

ul:nth-child(3n — 1) — Выберет каждый третий дочерний элемент, начиная с минус первого (2, 5, 8, …)

ul:nth-child(odd) — Выберет нечетные элементы (1, 3, 5, …)

ul:nth-child(even) — Выберет четные элементы (2, 4, 6, …)

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

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

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

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

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

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

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

Для примера, вы можете удивиться почему And so on… текст синий внутри тега <section> . На самом деле весь контент секции синий, как последний потомок главного дива — контейнера. Другие элементы секции имеют свои собственные цвета, переписанные другими селекторами, оставляя только один параграф разукрашенным в синий цвет.

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

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

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

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

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

::inactive-selection — Выбирает контент внутри негативного окна.

::spelling-error — Проверяет грамматику и правописание для редактируемых элементов.

::grammar-error — Выбирает грамматические ошибки.

::marker — Выбирает маркеры списков.

::placeholder — Выбирает текст плейсхолдеров элементов формы.

Всякие другие селекторы

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

:target выбирает элемент с id , который соответствует части данного URL. Так что если бы у нас был элемент с id part1 и ссылка:

Мы бы могли выбрать этот элемент:

Если у вас большой селектор, тогда :matches() сможет его упростить. Для примера, если у вас такая выборка:

То он может быть упрощен с :matches() и быть эквивалентным:

Отлично, это поможет сделать таблицы стилей более читаемыми. Далее у нас есть :any-link , очень удобный селектор и делает тоже самое, что и :link и :visited вместе.

Так что эти два селектора были бы фактически тем же самым:

И мы подходим к последним селекторам в этой статье:

Оба они относятся к языку сайта.

:dir() берёт параметр ltr или rtl , в зависимости от направления текста, который вы хотите выбрать и сейчас поддерживается Firefox.

Так что :dir(rtl) выбрал бы все элементы с контентом в направлении справа на лево.

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

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

en — Английский язык

el — Греческий язык

is — Исландский язык

Дивы могут быть выбраны по :lang селектору:

И хорошие новости в том, что :lang селектор уже поддерживается всеми главными браузерами.

И под конец

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

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

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

CSS :: Селекторы

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

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

Универсальный селектор выбирает все элементы, а сам селектор имеет вид звездочки, например, * <блок объявлений>(см. пример №1 ).

Пример №1. Использование универсального селектора

Селектор по типу

Селектор по типу выбирает все элементы указанного типа, а если их несколько, то типы элементов перечисляются через запятую. Например, span <блок объявлений>или сразу для нескольких типов элементов span, div, p <блок объявлений>(см. пример №2 ).

Пример №2. Использование селектора по типу

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

Селектор по классу выбирает все элементы, у которых в качестве значения атрибута class указано имя селектора. Сам селектор по классу начинается с точки, после которой следует имя селектора (класса), например, .my_class <блок объявлений>(см. пример №3 ).

Пример №3. Использование селектора классов

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

Селектор по идентификатору выбирает элемент с соответствующим значением атрибута id. Сам селектор начинается со знака решетки # , после которого следует идентификатор (т.е. значение атрибута id), например, #my_id <блок объявлений>(см. пример №4 ).

Пример №4. Использование селектора по идентификатору

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

Селектор по атрибуту выбирает элементы по значению атрибутов, а сам селектор берется в квадратные скобки. Если селектор применяется к конкретному типу элементов, например, абзацам, то он пишется сразу после имени элемента без пробела. Данный тип селекторов обладает мощным инструментом поиска по шаблону, например:

  • [атрибут] – выбираются все элементы, у которых присутствует такой атрибут вне зависимости от его значения, например, [title] <блок объявлений>;
  • [атрибут="значение"] – выбираются все элементы, у которых данный атрибут имеет указанное в селекторе значение (здесь и далее учитывается также и регистр символов!), например, [title="Оранжевый цвет текста"] <блок объявлений>;
  • [атрибут^="значение"] – выбираются все элементы, у которых значение данного атрибута начинается на подстроку (фрагмент строки), указанную в селекторе, например, [title^="Красный цв"] <блок объявлений>;
  • [атрибут$="значение"] – выбираются все элементы, у которых значение данного атрибута заканчинается на подстроку, указанную в селекторе, например, [title$="кста!"] <блок объявлений>;
  • [атрибут

="значение"] – выбираются все элементы, у которых значение данного атрибута содержит подстроку, отделенную пробелами от остальной части, или отдельное слово и указанную в селекторе, например, [title

Пример №5. Использование селектора по атрибуту

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

Селектор потомков выбирает все элементы требуемого типа, которые находятся внутри указанных в селекторе элементов-родителей (в селекторе вложенный элемент пишется через пробел после элемента-родителя). Например, если задано правило div p span <блок объявлений>, то стиль будет применен ко всем элементам «span», которые находятся внутри абзацев, в свою очередь находящихся внутри элемента «div» (см. пример №6 ).

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

Пример №6. Использование селектора потомков

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

Селектор дочерних элементов выбирает элементы требуемого типа, которые являются дочерними по отношению к указанному в селекторе элементу, например, p>span <блок объявлений>(см. пример №7 ).

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

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

Селектор соседних элементов выбирает элементы требуемого типа, которые идут после указанного в селекторе элемента, например, p+span <блок объявлений>, где будут выбраны все элементы «span», которые идут после элементов «p» (см. пример №8 ).

Пример №8. Использование селектора соседних элементов

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

Селектор родственных элементов выбирает элементы требуемого типа, которые идут после указанного в селекторе элемента и вдобавок имеют с ним общего родителя. Например, если span

em <блок объявлений>, то будут выбраны все элементы «em», которые идут после элементов «span» и имеют с ним общего родителя (см. пример №8 ).

Пример №9. Использование селектора родственных элементов

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

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

  • :link – выбираются все непосещенные ссылки, например, a:link <блок объявлений>(см. пример №10 ).
  • :visited – выбираются все посещенные ссылки, например, a:visited <блок объявлений>.
  • :active – выбирается активный в данный момент элемент требуемого типа (таковым он становится в момент нажатия на него), например, span:active, a:active <блок объявлений>.

Пример №10. Псевдоклассы :active, :link, :visited

  • :hover – выбирается элемент требуемого типа, на который наведен курсор мыши, например, span:hover <блок объявлений>(см. пример №11 ).
  • :focus – выбирается элемент требуемого типа, который в данный момент находится в фокусе, например, span:focus <блок объявлений>.
  • :target – выбираются все элементы требуемого типа, которые используются в качестве якорей. Стиль к ним применяется после перехода по соответствующей ссылке, например, span:target <блок объявлений>.

Пример №11. Псевдоклассы :hover, :focus, :target

  • :focus-within – выбирается элемент требуемого типа, когда он сам или его потомки получают фокус, например, form:focus-within <блок объявлений>. Псевдокласс может быть полезен для подсветки формы или ее частей, когда пользователь вводит данные в поля формы (см. пример №12 ).
  • :enabled – выбираются все элементы формы требуемого типа, у которых атрибут disabled отсутствует (элемент доступен), например, button:enabled <блок объявлений>.
  • :disabled – выбираются все элементы формы требуемого типа, у которых атрибут disabled присутствует (элемент заблокирован), например, button:disabled <блок объявлений>.
  • :checked – выбираются все элементы требуемого типа, которые выбраны пользователем или выбраны по умолчанию при помощи атрибута checked , например, input:checked <блок объявлений>.

Пример №12. Псевдоклассы :focus-within, :enabled, :disabled, :checked

  • :required – выбираются все обязательные для заполнения поля формы <input> (у них присутствует атрибут required ), например, input:required <блок объявлений>(см. пример №13 ).
  • :optional – выбираются все необязательные для заполнения поля формы <input> (у них отсутствует атрибут required ), например, input:optional <блок объявлений>.
  • :default – выбираются все элементы формы требуемого типа, используемые по умолчанию в группе похожих элементов, например, button:default <блок объявлений>. Отметим, что данный псевдокласс имеет смысл использовать для следующих элементов с множественным выбором: <button>, <input type="checkbox">, <input type="radio"> и <option> .

Пример №13. Псевдоклассы :required, :optional, :default

  • :in-range – выбираются все элементы требуемого типа, у которых введённое пользователем значение находится в заранее заданном диапазоне (устанавливается при помощи атрибутов min и max ), например, input:in-range <блок объявлений>(см. пример №14 ).
  • :out-of-range – выбираются все элементы требуемого типа, у которых введённое пользователем значение находится вне допустимого диапазона (устанавливается при помощи атрибутов min и max ), например, input:out-of-range <блок объявлений>.

Пример №14. Псевдоклассы :in-range, :out-of-range

  • :valid – выбираются все поля формы, у которых введённое пользователем значение соответствует указанному типу, например, input:valid <блок объявлений>(см. пример №15 ).
  • :invalid – выбираются все поля формы, у которых введённое пользователем значение не соответствует указанному типу, например, input:invalid <блок объявлений>.
  • :indeterminate – выбираются группы элементов формы требуемого типа, находящиеся в неопределенном состоянии, например, input:indeterminate <блок объявлений>. Отметим, что данный псевдокласс имеет смысл использовать для следующих элементов: <input type="checkbox"> (при чем свойство indeterminate должно быть установлено в true через JavaScript ), <input type="radio"> и <progress>.

Пример №15. Псевдоклассы :valid, :invalid, :indeterminate

  • :lang(язык) – выбираются все элементы требуемого типа, у которых атрибут lang имеет значение языка, указанного в селекторе, например, p:lang(en) <блок объявлений>(см. пример №16 ).
  • :empty – выбираются все пустые элементы требуемого типа, например, span:empty <блок объявлений>.

Пример №16. Псевдоклассы :empty, :lang

  • :root – выбирает корневой элемент, которым в html -документе является элемент «html», например, :root <блок объявлений>.
  • :nth-child(значение) – выбираются дочерние элементы требуемого типа, у которых порядковый номер следования внутри родительского элемента соответствует значению, указанному в селекторе. В скобках могут быть указаны значения:
  • odd – выбираются дочерние элементы требуемого типа с нечетными порядковыми номерами относительно своего родителя. Например, если задано правило span:nth-child(odd) <блок объявлений>, то в документе будут выбраны все дочерние элементы «span», которые имеют нечетные порядковые номера ( 1 , 3 , 5 и т.д.) относительно своего родительского элемента (см. пример №17 ).
  • even – выбираются дочерние элементы требуемого типа с четными порядковыми номерами относительно своего родителя. Например, если задано правило span:nth-child(even) <блок объявлений>, то в документе будут выбраны все дочерние элементы «span», которые имеют четные порядковые номера ( 2 , 4 , 6 и т.д.) относительно своего родительского элемента.

Пример №17. Псевдокласс :nth-child()

  • n – выбираются дочерние элементы требуемого типа с указанным порядковым номером n относительно своего родителя, при чем нумерация должна начинаться с единицы. Например, если задано правило span:nth-child(3) <блок объявлений>, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковый номер 3 относительно своего родительского элемента (см. пример №18 ).
  • an+b – выбираются дочерние элементы требуемого типа, порядковый номер которых относительно своего родителя вычисляется по формуле an+b , где a и b – целые числа, задаваемые в качестве значений, а n – счетчик, который автоматически принимает значения 0 , 1 , 2 и т.д. Например, если задано правило span:nth-child(3n+4) <блок объявлений>, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковые номера 4 , 7 , 10 и т.д. относительно своего родительского элемента.

Пример №18. Псевдокласс :nth-child(an+b)

Пример №19. Псевдокласс :nth-last-child()

  • :first-child – выбираются первые дочерние элементы требуемого типа (порядковый номер n=1 ) относительно своего родительского элемента, например, если задано правило span:first-child <блок объявлений>, то в документе будут выбраны все первые дочерние элементы «span» относительно своих родительских элементов (см. пример №20 ).
  • :last-child – выбираются последние дочерние элементы требуемого типа относительно своего родительского элемента, например, если задано правило span:last-child <блок объявлений>, то в документе будут выбраны все последние дочерние элементы «span» относительно своих родительских элементов.
  • :only-child – выбираются дочерние элементы требуемого типа, которые являются единственными дочерними элементами для своего родительского элемента, например, если задано правило span:only-child <блок объявлений>, то в документе будут выбраны все дочерние элементы «span», которые являются единственными дочерними элементами для своего родительского элемента.

Пример №20. Псевдоклассы :first-child, :last-child, :only-child

  • :nth-of-type(значение) – выбираются дочерние элементы требуемого типа без учета (подсчета) любых других дочерних элементов, у которых порядковый номер следования внутри родительского элемента соответствует значению, указанному в селекторе. В скобках могут быть указаны те же значения, что и в случае псевдокласса :nth-child , т.е. odd , even , n или an+b . Например, если задано правило span:nth-of-type(3n+4) <блок объявлений>, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковые номера 4 , 7 , 10 и т.д., но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся (см. пример №21 ).
  • :nth-last-of-type(значение) – выбираются дочерние элементы требуемого типа без учета (подсчета) любых других дочерних элементов, у которых порядковый номер следования внутри родительского элемента отсчитывается от конца родительского элемента (от закрывающего тега) и соответствует значению, указанному в селекторе. В скобках могут быть указаны те же значения, что и в случае псевдокласса :nth-child , т.е. odd , even , n или an+b . Например, если задано правило span:nth-last-of-type(3n+1) <блок объявлений>, то в документе будут выбраны все дочерние элементы «span», которые имеют порядковые номера 1 , 4 , 7 и т.д., отсчитываемые относительно конца своего родительского элемента, но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся.

Пример №21. Псевдоклассы :nth-of-type(), :nth-last-of-type()

  • :first-of-type – выбираются первые дочерние элементы требуемого типа (порядковый номер n=1 ) относительно своего родительского элемента, но без учета (подсчета) любых других видов дочерних элементов. Например, если задано правило span:first-of-type <блок объявлений>, то в документе будут выбраны все первые дочерние элементы «span» относительно своих родительских элементов, но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся (см. пример №22 ).
  • :last-of-type – выбираются последние дочерние элементы требуемого типа относительно своего родительского элемента, но без учета (подсчета) любых других типов дочерних элементов. Например, если задано правило span:last-of-type <блок объявлений>, то в документе будут выбраны все последние дочерние элементы «span» относительно своих родительских элементов, но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся.
  • :only-of-type – выбираются дочерние элементы требуемого типа, которые являются единственными дочерними элементами для своего родительского элемента данного типа (при этом дочерние элементы других типов могут присутствовать). Например, если задано правило span:only-of-type <блок объявлений>, то в документе будут выбраны все дочерние элементы «span», которые являются единственными дочерними элементами данного типа для своего родительского элемента.

Пример №22. Псевдоклассы :first-of-type, :last-of-type, :only-of-type

  • :not(селектор) – выбираются все элементы требуемого типа, которые не подходят под шаблон указанного в скобках селектора. При этом нельзя использовать в качестве значения в скобках сам псевдокласс и псевдоэлементы; например, если задано правило span:not([contenteditable]) <блок объявлений>, то в документе будут выбраны все элементы «span», у которых отсутствует атрибут contenteditable (см. пример №23 ).

Пример №23. Псевдокласс :not()

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

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

  • ::first-letter – выбирается первый символ текста в элементах требуемого типа, у которых свойство display имеет одно из значений: block , inline-block , list-item , table-cell или table-caption . При этом первая буква элементов с display: inline-block или display: table-cell не должна быть в тоже время и первой буквой родительского элемента. Кроме того, к псевдоэлементу могут применяться только свойства, относящиеся к шрифтам, тексту, полям, границам, отступам, цвету и фону, хотя в зависимости от браузера могут применяться и некоторые другие свойства. Например, если задано правило p::first-letter <блок объявлений>, то данный стиль будет применен ко всем первым буквам абзацев (см. пример №24 ).
  • ::first-line – выбираются первые строки блочных элементов требуемого типа, которые отсчитываются от начала текста до принудительного либо автоматического перевода текста на новую строку. При этом ширина строки может меняться в зависимости от ширины блочного элемента, но стиль первой строки будет оставаться постоянным вплоть до перевода на новую строку. К псевдоэлементу могут применяться только свойства, относящиеся к шрифтам, тексту, цвету и фону, хотя в зависимости от браузера могут применяться и некоторые другие свойства. Например, если задано правило p::first-line <блок объявлений>, то данный стиль будет применен ко всем первым строкам абзацев.

Пример №24. Псевдоэлементы ::first-letter, ::first-line

  • ::before – выбираются элементы требуемого типа, перед которыми вставляется предопределенное содержимое, указанное в качестве значения стилевого свойства content. Например, p::before <блок объявлений>(см. пример №25 ).
  • ::after – выбираются элементы требуемого типа, после которых вставляется предопределенное содержимое, указанное в качестве значения стилевого свойства content. Например, p::after <блок объявлений>.

Пример №25. Псевдоэлементы ::before, ::after

  • ::placeholder – позволяет задать стилевое оформление подсказки, созданной атрибутом placeholder . Например, p::placeholder <блок объявлений>. Псевдокласс может быть полезен для изменения шрифта и цвета подсказки в поле ввода (см. пример №26 ).
  • ::selection – позволяет задать стилевое оформление выделенного пользователем текста. Например, p::selection <блок объявлений>. При этом в правилах стилей разрешается использовать только следующие свойства: background, background-color, color, cursor, outline и text-shadow.

Пример №26. Псевдоэлементы ::placeholder, ::selection

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

Очень важной особенностью перечисленных видов селекторов является возможность их комбинирования между собой практически в любых вариациях. Приведем в качестве примеров несколько комбинаций селекторов разных видов: p.my_class:hover <блок объявлений>– стиль будет применен ко всем параграфам, у которых задан атрибут class="my_class" , при наведении на них курсора мыши; .list_1 a:visited <блок объявлений>– этот стиль будет применен ко всем посещенным ссылкам, которые находятся внутри элементов с атрибутом class="list_1" ; p[class*="back"] > strong span[contenteditable]:focus <блок объявлений>– этот стиль будет применяться к каждому элементу «span», у которого имеется атрибут contenteditable, он находится в данный момент в фокусе и является вложенным в элемент «strong», который является дочерним по отношению к элементу «p», имеющему атрибут class, в значении которого присутствует подстрока «back» . Следует обязательно попрактиковаться в составлении селекторов. Для этого можно воспользоваться нашим задачником.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *