Селекторы CSS и их применение в автоматизации тестирования Программного Обеспечения
Данную тему мы уже раскрывали на вебинаре, который проводил наш преподаватель, но решили дополнить чуть текстом (да и многим, как оказалось, так удобнее). В общем представляем статью на тему «Селекторы CSS», которую Павел Попов прорабатывал в рамках нашего курса «Автоматизация в тестировании».
Каждый курс или статья для начинающих автоматизаторов рассказывает об удобном и универсальном средстве поиска элементов Web-страницы, как XPath. Данный вид локаторов на элемент был создан в 1999 году для указания на элементы в XML файлах. С помощью встроенных функций XPath стал очень популярным инструментом поиска элементов на Web-странице. Если HTML код вашего приложения выглядит как-то так:
и вы не можете найти достойный XPath для кнопки “Нажми меня”, не стоит сразу бежать в сторону разработчика с просьбой о помощи. Есть отличная возможность воспользоваться CSS селектором, он будет выглядеть так:
Добро пожаловать в мир CSS.
Принято считать, что в CSS селекторах все завязано на классы. Это не совсем так, но если Web приложение использует “оптимизатор” или “обфускатор” HTML кода, и выглядит вот так:
(все названия css классов уменьшены с помощью оптимизатора)
, то получить короткий CSS селектор не удастся — как правило, после каждого нового билда css классы меняются на новые. Но все равно, CSS селектор может оказаться проще и в этом случае: css: form button[type=‘submit’] , вместо XPath: //form//button[@type=‘submit’]
Допустим, что оптимизаторы HTML у нас не установлены и разработчики не планируют его использовать на проекте (проверьте этот факт!).
Как вы могли уже догадаться, символ. используется вместо слова class и будет искать вхождение данного класса в любом элементе, в независимости от количества классов у этого элемента.
css для элемента button: .button_submit , при этом класс .wrapper_button указывать необязательно, но если он нужен для указания на наш класс, мы можем его добавить сразу после указания первого css класса: css: .button_submit.wrapper_button . Порядок классов роли не играет, поэтому их можно поменять местами:
Следующим незаменимым помощником в поиске HTML элементов являются Теги. Написать css селектор, указывающий на тег button очень просто, тем более, что он уже был написан в этом предложении. CSS селектор для button –
И ничего больше указывать вам не требуется, если ваша цель — это привязка к тегу. Совмещая теги и классы получаем::
и это также является css селектором к нашему элементу.
Помимо тегов, атрибуты также помогают уникально идентифицировать элемент на странице. Часто разработчики создают дополнительные атрибуты вместо добавления новых “айдишников”, например, могут создавать дополнительные атрибуты data-id или auto-id у каждого элемента, с которым планируется дальнейшее действие. К примеру, разработчики могут добавить атрибут data-id к нашей кнопке button. Тогда к атрибутам с помощью css селектора можно обратиться через фигурные скобки: [data-id=‘submit’] . Дополнительно, вы можете не указывать значение атрибута после знака равно [data-id] . Такой селектор найдет вам все элементы, у которого существует атрибут data-id с любым значением внутри. Вы также можете указать атрибут class для поиска нашей кнопки: [class=‘button_submit’] , но в CSS, как вы уже знаете, можно полениться и написать так: .button_submit . Соединять все вместе также достаточно просто:
Но это большая удача, если нам удается находить элемент, используя селектор с указанием только одного элемента, как, например, использовать атрибут [data-id] который однозначно находит один элемент на странице. Очень часто нам приходится использовать предков элемента, чтобы найти потомка. И это в CSS тоже возможно сделать достаточно просто:
и знак > позволяет найти элемент исключительно у предка внутри. Но писать все элементы ненужно, так как в CSS есть возможность поиска во всех потомках, этот символ — пробел “ “ . Используя данный указатель мы можем быстро найти элемент внутри формы:
Было: css: form > div > div > div > button.button_submit
Стало: css: form button,button_submit
Удобно также находить следующего “родственника” через предыдущего. Дополним наш пример еще одним span :
[data-id=‘link’] + button найдет button , у которого выше на один уровень есть родственник с атрибутом data-id=”link” . Этим указателем можно пользоваться, когда у предыдущего элемента есть id или уникальный атрибут, а у элемента, который находится следующим после нужного, таких идентификаторов нет. Итак, с помощью символа + css селектор найдет следующего родственника.
Дополнительно вы можете собирать “паровозик” из следующих элементов с использованием указателя +, но не советую это делать из-за возможного изменения местонахождения элементов.
Не стоит упускать вариант поиска по части атрибута. Делается это просто: button[class*=‘submit’] — из длинного названия класса button_submit мы берем только правую часть submit и добавляем к знаку = символ *. Также можно найти по слову cell из значения класса: div[class*=‘cell’] .
Есть еще одна особенность css селекторов, которая позволит найти вам все ссылки или расширения файлов, это ^= и $= , но такая задача стоит не так часто, как поиск по вхождению значения у атрибута.
a[href^=“https:”] — найдет все ссылки, которые начинаются с https,
a[href$=“.pdf”] — найдет все ссылки, которые заканчиваются на .pdf.
Немного о том, как найти потомков с одним и тем же тегом у предка. Начнем, как всегда, с примера:
Как найти второй div > у div >? Варианта два:
Но в чем различие между этими двумя селекторами? Дополним пример:
css 1 вариант: div > div:nth-of-type(2)
css 2 вариант: div > div:nth-child(2)
Теперь эти селекторы ведут на два разных элемента. Прежде чем идти далее, попробуйте догадаться, какой селектор ведет на какой элемент?
первый селектор будет указывать на строчку номер 2, тогда как второй селектор будет указывать на строчку номер 3. nth-child ищет второй div , который является потомком родителя . Второй у элемента это третья строка. В свою очередь nth-of-type ищет второй элемент у родителя , который должен являться тегом , это строка номер два.
Есть правило, которое позволяет упростить работу с селекторами в ситуации, когда вам нужно найти конкретный элемент: использовать nth-of-type везде, где это возможно. Если вы разобрались с примером выше, рекомендую вам всегда обращать внимание на количество одинаковых элементов у предка, используя nth-child , и тогда вам будет неважно, куда поместят ссылку : наверху, между или внизу блока, всегда селектор div:nth-child(2) будет все равно указывать на нужный элемент – второй элемент div внутри блока.
Была опущена еще одна функция поиска элемента по id. Вы уже знаете, что поиск по любому из атрибутов осуществляется с использованием указания квадратных скобок [attribute=“value”] и для нашего случая мы можем найти элемент так [id=“value”] . А что если есть существует более быстрый способ поиска по id элемента?
Используя все приобретенные навыки попробуйте написать селектор для кнопки
Будем рады увидеть ваши комментарии и варианты в комментариях тут или обсудить это на очередном открытом уроке, который пройдёт у нас 13-го марта.
Селекторы в CSS: что это такое, как они работают и какие бывают
Большой гайд для тех, кто хочет правильно находить и выбирать элементы при вёрстке.
Иллюстрация: Оля Ежак для Skillbox Media
Удачный выбор селектора не только позволяет избежать ошибок в коде, но и упрощает вёрстку, поэтому желательно знать разновидности селекторов и хорошо в них ориентироваться. Эта статья будет полезна как новичкам, так и опытным фронтенд-разработчикам и верстальщикам, которые хотят освежить знания.
Содержание
Что такое селекторы в CSS
Селектор (от англ. select — выбирать) — это шаблон, который позволяет обратиться к элементу или группе элементов веб-страницы, чтобы применить к ним стили CSS. Его указывают перед блоком со свойствами:
В примере выше селектор указывает на тег <a> (гиперссылка). Так мы говорим браузеру отключить подчёркивание у всех ссылок на странице, устанавливая для свойства text-decoration значение none.
Подключим CSS-стили к следующему HTML-файлу:
Вот как она выглядит в браузере:
Есть ненумерованный список со ссылками, которые браузер по умолчанию выделяет синим цветом и подчёркивает. Если подключить стили, которые мы написали выше, то подчёркивание исчезнет:
CSS-селектор работает! Но это, конечно, далеко не единственный способ обращения к элементам.
О том, как подключить CSS к HTML, читайте в другой нашей статье.
Виды селекторов
Структура реальных проектов гораздо сложнее. Веб-страницы интернет-магазинов, корпоративных сайтов и блогов наполнены множеством вложенных и однотипных элементов — всем нужно задать уникальный дизайн. Если бы мы могли обращаться к ним только по названию, то даже с CSS веб оставался бы хранилищем скучного гипертекста.
К счастью, есть около 20 способов выбрать нужный элемент. Рассмотрим основные.
Универсальный селектор
Он применяет стили ко всем элементам страницы и обозначается символом * (звёздочка). С его помощью удобно сбрасывать отступы и задавать значение box‑sizing для всех блочных элементов:
Селектор по тегу (элементу)
Этот селектор CSS применяет стили ко всем элементам с одинаковым тегом. Например, для всех <div>, <h2>, <p> и так далее.
Мы уже познакомились с ним, когда убирали подчёркивание у ссылок:
Селектор по идентификатору (id)
Селектор по идентификатору обозначается символом # (решётка) и применяет стили к элементу, для которого задан атрибут id с соответствующим значением. При этом у элемента может быть только один id, и этот id должен быть уникальным в пределах веб-страницы.
Текст в блоке p с идентификатором intro окрасится в красный, а текст с идентификатором article_content выделится жирным и получит шрифт без засечек:
Селектор по классу (class)
CSS-селектор по классу выбирает элементы, для которых назначен атрибут class с соответствующим значением. При этом один элемент может принадлежать нескольким классам — в таком случае их перечисляют через пробел:
Абзац входит в классы plain_text и article. Значит, к нему применяются стили обоих классов:
Группа селекторов
CSS-селекторы можно сгруппировать, чтобы применить стили к нескольким группам и/или классам элементов. Для этого достаточно перечислить их через запятую:
Выбор элементов по отношению и расположению
Есть группа селекторов, которые позволяют выбрать элемент по его отношению к другим элементами (родитель — потомок) и по расположению в DOM (Document Object Model).
Выбрать всех потомков
Чтобы обратиться ко всем потомкам В элемента A, независимо от уровня их вложенности, используют конструкцию A B (селекторы разделяют пробелом):
В примере выше мы устанавливаем всем изображениям внутри элемента figure значение нижних отступов 20 пикселей.
Выбрать потомков первого уровня
Если нужно применить CSS-стили к потомкам B элемента A только на первом уровне вложенности, то вместо пробела пишут символ >:
Здесь мы задали изображениям внутри контейнера с классом .container значение нижних отступов 40 пикселей.
Выбрать все следующие элементы
B выбирает все элементы B, которые идут после A. Обратите внимание: «идут после», а не вложены в него. Например, так мы задали цвет фона #f2f3f5 всем карточкам, которые идут после блока из класса .about_us:
Выбрать первый следующий элемент
Селектор A + B выбирает только первый элемент B, который следует за A:
В этом примере цвет фона #f2f3f5 установится только для той карточки, которая идёт сразу после .about_us.
CSS-селекторы по атрибуту
Ещё один полезный инструмент — селекторы по атрибуту. Они позволяют выбрать элемент по имени атрибута, его значению или части значения. Кратко расскажем обо всех.
[attr]
Применяет стили к элементам, для которых задан этот атрибут:
[attr=value]
Работает по имени и значению атрибута:
[attr^=value]
Находит элементы с заданным атрибутом, значение которого начинается с value:
[attr|=value]
Ищет по названию атрибута и значению, которое равно или начинается с value:
[attr$=value]
Применяет CSS-стили к элементам, у которых значение заданного атрибута оканчивается на value:
[attr*=value]
Селектор по названию атрибута и значению, которое должно содержать value:
[attr
Этот шаблон выбирает элементы с атрибутом attr, значение которого состоит из нескольких слов, разделённых пробелом, одно из которых — value:
Псевдоклассы и псевдоэлементы
Псевдокласс выбирает элементы, находящиеся в определённом состоянии или положении в иерархии DOM.
Вот несколько примеров таких состояний:
- на кнопку наведён курсор мыши;
- пользователь перешёл или не перешёл по ссылке;
- курсор установлен на поле ввода.
Например, так с помощью CSS можно увеличить размер ссылок, на которые пользователь навёл курсор:
Вот как это выглядит в браузере:
А в следующем примере мы добавляем нижний отступ последнему параграфу-потомку контейнера («Параграф 3»).
Если зайти в DevTools, то можно увидеть, что под третьим элементом p появилось поле margin (подсвечивается бежевым цветом):
Вот список основных псевдоклассов:
| Название | Состояние элемента |
|---|---|
| :hover | Наведён курсор |
| :focus | Элемент находится в фокусе (например, по нему кликнули мышью или его выбрали клавишей Tab) |
| :visited | Ссылка, которая была посещена |
| :active | Активный элемент (в промежутке времени между нажатием и отпусканием кнопки мыши) |
| :checked | Элементы radio, checkbox или option, которые были выбраны |
| :first-child | Первый потомок элемента |
| :last-child | Последний потомок элемента |
| :nth-child() | Каждый n-й потомок — число n передаётся в качестве аргумента |
| :last-nth-child() | Последние n потомков — число n передаётся в качестве аргумента |
| :read-write | Элементы, доступные для редактирования |
Посмотреть другие псевдоклассы можно на сайте Mozilla.
Вес CSS-селектора, или специфичность
Для одного и того же элемента веб-страницы можно прописать сколько угодно стилей. Если в разных местах CSS-файла какому-то его свойству заданы разные значения, то браузер должен выбрать одно из них.
Обычно подключается правило, которое определено последним, но так происходит не всегда. Дело в том, что одни селекторы обладают более высокой специфичностью, чем другие.
Специфичность — это показатель, по которому браузер определяет, какие стили применить к элементу. Её можно представить в виде четырёх чисел 0.0.0.0, где каждый разряд — это вес, определяемый специальными правилами.
Вот эти правила:
- Наивысший приоритет — у стилей, прописанных в атрибуте style (1.0.0.0).
- На втором месте — селекторы по идентификатору (0.1.0.0).
- Затем идут три равноправные группы: селекторы по классу, атрибуту и псевдоклассы (0.0.1.0).
- На четвёртом месте — селекторы по тегу и псевдоэлементы (0.0.0.1).
- Комбинаторы
Чтобы определить самый «тяжёлый» селектор, браузер сначала взвешивает каждый, а затем сравнивает их поразрядно.
Попробуем порассуждать как браузер. Допустим, на странице есть элемент, на который указывают два CSS-селектора:
Рассчитаем их вес:
- Класс .container добавляет 1 в третий разряд, а div и ul — по единице в четвёртый. Результат: 0.0.1.2.
- Идентификатор our_team добавляет 1 во второй разряд, тег div — 1 в четвёртый разряд, а класс .developers — 1 в третий. Получаем 0.1.1.1.
Браузер применит стили селектора #our_team div.developers, потому что он указывает на идентификатор (см. правило №2 в списке).
А если бы исследуемый элемент обладал атрибутом style, то и считать ничего бы не пришлось. Ведь, как мы уже знаем, style обладает наивысшим приоритетом:
А теперь секретный приём. Вы можете перебить любое правило, если добавите к нему ключевое слово !important. В таком случае стили намертво приклеятся к элементу:
После этого изменить начертание текста в ссылках можно будет, только если использовать !important в более специфическом селекторе. Например, таком:
Опытные разработчики не рекомендуют использовать !important, потому что это усложняет поддержку кода и ломает каскад. Поэтому просто помните о его существовании во время дебаггинга: возможно, это словечко спряталось где-то в документе styles.css.
Итог
CSS предоставляет большое количество селекторов для удобной стилизации веб-страниц. Запомните их и используйте всё разнообразие, чтобы писать понятный и легко поддерживаемый код. А закрепить знания можно в замечательной браузерной игре CSS Dinner.
30 CSS селекторов, которые вы должны знать
Приветствую, друзья, сегодня я покажу 30 CSS селекторов, которые должен знать каждый верстальщик и веб-разработчик. Не важно, если вы только ознакомились с основными CSS селекторами в виде классов и id, или вы уже некоторые время работаете, эта статья поможет всем. Новичкам она поможет разобраться в вопросе лучше. Опытным же разработчикам поможет оптимизировать код, и ускорить процесс верстки в будущем.
Как всегда, я уже подготовил видео к этой статье, советую посмотреть его. В видео я подробнее рассказываю о 30 CSS селекторах. Так же в видео я покажу на примерах как работает тот или иной селектор. Эту же статью я рекомендую использовать больше как шпаргалку к видео и последующей работы. Давайте начинать!
Видео о 30 CSS селекторах, которые вы должны знать
CSS селектор *
Данный селектор выбирает все элементы на странице. Часто его используют в самом начале документа для указания свойства box-sizing: border box для всех элементов. Но вы можете указывать любые свойства. Я в примере ниже указал цвет текста. Он применится для всех элементов на странице.
Так же данный селектор можно применят для стилизации всех дочерних элементов конкретного элемента. В примере ниже я задаю зеленый цвет для всех элементов внутри .block.
CSS селектор # / #element
Скорее всего вы уже знакомы с селектором id. Это один из самых базовых селекторов. Однако, я советую избегать использования данного селектора для стилизации. ID селектор более функционален для использования из JavaScript. В CSS же он только вносит дополнительную сложность, если вы все элементы стилизуете через классы, а некоторые через id. Так же особенность id это то, что id должен быть уникален, и с помощью него можно выбрать только 1 элемент на странице.
CSS селектор . / .element
Это так же базовый и самый часто используемый селектор. В отличие от id он не должен быть уникален и может использоваться для выбора нескольких элементов на странице. С помощью него стилизуют почти все элементы на странице.
CSS селектор element element (контекстный)
С помощью данного селектора можно выбрать элементы, которые соответствуют заданному контексту. Здесь вы можете передавать другие селекторы, например, классы, ID или название тегов. Давайте рассмотрим такие примеры:
Так же мы можем задавать свойства по условию. Например, сменить цвет элементу, если он имеет указанный класс.
CSS селектор element (селектор по типу)
Данный селектор помогает выбрать все элементы с указанным типом на странице. Например, мы можем выбрать все ссылки или списки.
CSS селектор a:visited и a:link
С помощью css селектора a:link мы можем выбрать все ссылки, на которые пользователь еще не нажал. С помощью же селектора a:visited мы сможем выбрать те ссылки, по которым пользователь уже переходил. Так же вы можете комбинировать селекторы между собой. Например, стилизовать ссылки с заданным классом, по которых пользователь уже переходил.
CSS селектор + / element + element
Позволяет выбрать элемент, который идет сразу же после указанного элемента.
CSS селектор > / element > element
Позволяет выбрать только тот элемент, который является прямым потомком указанного элемента. Давайте рассмотрим такой код с комментариями.
CSS селектор
Данный селектор похож на селектор +. Только в отличие от него, он выберет не первый элемент после указанного, а все указанны элементы, расположенные на том же уровне вложенности.
CSS селектор [attribute] / element[attribute]
Это селектор атрибутов. Он выберет все элементы, у которых присутствует указанный атрибут.
CSS селектор [attribule=»value»] / element[attribule=»value»]
Данный селектор выбирает те элементы, у которых указан заданный атрибут с заданным значением. Особенностью данного селектора является его строгость. Если ссылка будет хоть немного отличатся, например будет указанно http://google.com или google.com, то селектор не сработает.
CSS селектор [attribute*=»value»] / element[attribute*=»value»]
Данный селектор очень похож на предыдущий, однако он является более гибким. Здесь мы указываем то значение, которое должно быть хотя бы частью искомого атрибута. Однако важно помнить, что он слишком обширен. Например, код ниже так же выберет домен, например, ex-google.com, так как в нем есть наша искомая часть.
CSS селектор [attribute^=»value»] / element[attribute^=»value»]
Данный селектор ищет элементы, у которых начало значения атрибутов соответствую заданному началу строки.
CSS селектор [attribute$=»value»] / element[attribute$=»value»]
Данный атрибут очень сильно похож на предыдущий, однако он ищет не по началу строки, а по концу.
CSS селектор [data-*=»value»] / element[data-*=»value»]
Данный селектор помогает выбрать элементы в зависимости от значения data атрибута. Давайте в примере ниже выберем все ссылки, которые ведут на внешний источник.
CSS селектор [data-
Данный селектор похож на предыдущий, но добавляет некоторую гибкость. С помощью него мы можем выбрать атрибут, у которого есть значения, разделенные пробелом. Теперь давайте выберем ссылки на внешнее изображение.
Теперь мы можем выбрать данную ссылку двумя способами.
CSS селектор :checked / element:checked
Как видно из названия, данный селектор выбирает только отмеченные/выбранные чекбоксы и радио кнопки. В примере ниже мы объединим несколько уже пройденных селекторов. Мы будем красить label, в зависимости от состояния чекбокса.
CSS селекторы ::before и ::after
Тут мы получаем псевдоклассы определенного элемента. Они позволяют нам добавить контент вокруг данного элемента. В примере ниже мы добавим красную точку после элемента с классом block.
CSS селектор :hover / element:hover
Тоже очень часто используемый селектор. Позволяет присваивать стили при наведении на элемент.
CSS селектор :not(selector) / element:not(selector)
Псевдокласс отрицания может быть очень полезен, если вам нужно выбрать все элементы кроме тех, которые соответствую указанному условию.
CSS селектор ::pseudoElement / element::pseudoElement
Мы можем использовать данный селектор для стилизации определенной части элемента. Ниже я приведу более детальное описание с примерами, так как их есть несколько.
Как выбирать первую строчку параграфа
Как выбрать первую букву параграфа
CSS селектор :nth-child(n) / element:nth-child(n)
Помогает выбрать элемент в зависимости от его позиции на данном уровне вложенности.
CSS селектор :nth-last-child(n) / element:nth-last-child(n)
Позволяет выбрать определенный элемент с конца.
CSS селектор :nth-of-type(n) / element:nth-of-type(n )
Очень похож на селектор :nth-child, однако он работает не для всех дочерних элементов, а только для тех, которые соответствуют типу. Важной особенностью является то, что считает он так же только элементы с нужным типом.
CSS селектор :nth-last-of-type(n) / element:nth-last-of-type(n)
Работает как селектор выше, но начинает считать с конца.
CSS селектор :first-child / element:first-child
Этот псевдокласс выбирает первый дочерний элемент.
CSS селектор :last-child / element:last-child
Этот псевдокласс выбирает последний дочерний элемент.
CSS селектор :only-child / element:only-child
Откровенно говоря, вы вря дли будете хоть сколько-нибудь часто использовать данный селектор. Он позволяет выбрать элемент, если он единственный дочерний элемент другого элемента.
CSS селектор :only-of-type / element:only-of-type
Позволяет выбрать элемент, если он единственный элемент заданного типа у родителя.
CSS селектор :first-of-type / element:first-of-type
Выбирает первый элемент указанного типа. Нумерация начинается только с нужного типа элемента.
Спасибо, что прочитали! Если у вас остались вопросы, задавайте их в комментариях на YouTube или в нашем Telegram чате.