Поиск селекторов в браузере
Селектор определяет, к какому элементу применять то или иное CSS-правило.
Обратите внимание - не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.
Базовые селекторы
Комбинаторы
Комбинатор запятая Комбинатор , это способ группировки, он выбирает все совпадающие узлы.
Синтаксис: A , B
Пример: div, span выберет оба элемента - и и . Комбинатор потомков Комбинатор ' ' (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
Синтаксис: A B
Пример: селектор div span выберет все элементы , которые находятся внутри элемента . Дочерние селекторы Комбинатор '>' в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
Синтаксис: A > B
Пример: селектор ul > li выберет только дочерние элементы , которые находятся внутри, на первом уровне вложенности по отношению к элементу . Комбинатор всех соседних элементов Комбинатор '~' выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.
Синтаксис: A ~ B
Пример: p ~ span выберет все элементы , которые находятся после элемента внутри одного родителя. Комбинатор следующего соседнего элемента Комбинатор '+' выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
Синтаксис: A + B
Пример: селектор ul + li выберет любой элемент, который находится непосредственно после элемента .
Псевдо
Псевдоклассы Знак : позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.
Пример: a:visited соответствует всем элементам которые имеют статус "посещённые".
Ещё пример: div:hover соответствует элементу, над которым проходит указатель мыши.
Ещё пример: input:focus соответствует полю ввода, которое получило фокус. Псевдоэлементы Знак :: позволяет выбрать вещи, которых нет в HTML.
Пример: p::first-line соответствует первой линии абзаца .
XPath или XML Path Language — это язык запросов к элементам XML- и HTML-документов. Запрос нужен затем, чтобы получить из этих документов какую-то нужную нам информацию. Допустим, у нас есть следующая веб-страница
и мы хотим узнать из нее дату создания аннотации, хранящуюся в элементе < p >с идентификатором date (01.01.2015).
Проследим путь к этому элементу от начала документа:
- < html >-- все содержимое страницы, в том числе и дата, находится внутри этого элемента;
- < body >- сузим область поиска до «тела» страницы;
- < div >- дата содержится в первом из двух подобных элементов;
- < p >- дата находится внутри абзаца. Второй < div >сразу отпадает – в нем нет абзацев;
- абзац с идентификатором ( id ) date.
Запишем этот путь следующим образом:
Это и будет запрос XPath – путь к нужному нам элементу.
Одиночный слеш «/» в начале означает, что путь – абсолютный, т.е. от начала документа.
В квадратных скобках возле p стоят дополнительные условия поиска. Нам ведь нужны не все абзацы внутри < div >, а только абзац с заданным id . Если бы нам понадобилось найти абзац, принадлежащий к заданному классу, то условие выглядело бы так: [@class='имя_класса'] . Например, путь:
Указывает на второй абзац текста.
Одиночные кавычки вокруг имени класса или идентификатора существенны. Опускать их нельзя. Заменять на двойные кавычки тоже, чтобы не возникло путаницы с текстом команды XPath-запроса, которую вы будете задавать в консоли браузера
Абсолютный путь можно заменить относительным, т.е. путем от заданного места документа. Относительный путь начинается с двойного слеша «//». Например, //div означает путь от предка элемента < div >, т.е. < body >, и в результате запроса
Будут найдены оба элемента < div >. Точнее, запрос возвратит список из двух < div >-ов. Выбрать < div >, содержащий аннотацию, можно по его номеру: он 1-й в списке, а нумерация начинается с единицы
С помощью относительного пути запрос, возвращающий дату, сокращается до
Но и этот путь можно сократить, ведь нужный нам абзац обладает уникальным именем date :
- О консоли разработчика можно прочитать здесь и здесь.
- О поиске информации с помощью CSS-селекторов -- здесь.
Комментарии
Дмитрий Храмов
Компьютерное моделирование и все, что с ним связано: сбор данных, их анализ, разработка математических моделей, софт для моделирования, визуализации и оформления публикаций. Ну и за жизнь немного.
Как найти нужный элемент по XPath или CSS-селекторам в Firefox можно узнать здесь.
Консоль разработчика открывается командой Ctrl+Shift+I (или меню правой кнопки Просмотреть код)
Консоль нужна нам затем, чтобы задавать XPath-запросы и указывать CSS-селекторы нужных элементов страницы.
Допустим, что нас интересует форма запросов Яндекса. Найти форму можно, указав на нее мышью и выбрав в меню правой кнопки Просмотреть код:
Или XPath-запросом в консоли вида $x("запрос") . В нашем случае это: $x("/html/body/div/div")[1]
Форма запроса является вторым элементом списка div'ов, содержащихся в .
CSS-селекторы задаются командой $$("селектор") . Например, форма запроса на странице Яндекса находится как
Обратите внимание на подсказку внизу вкладки Elements. Не нужно подбирать путь по селекторам или Xpath, Яндекс.Браузер сам подскажет его нам, позволит скопировать:
и подсветит соответствующий элемент на странице
Комментарии
Дмитрий Храмов
Компьютерное моделирование и все, что с ним связано: сбор данных, их анализ, разработка математических моделей, софт для моделирования, визуализации и оформления публикаций. Ну и за жизнь немного.
Данную тему мы уже раскрывали на вебинаре, который проводил наш преподаватель, но решили дополнить чуть текстом (да и многим, как оказалось, так удобнее). В общем представляем статью на тему «Селекторы CSS», которую Павел Попов прорабатывал в рамках нашего курса «Автоматизация в тестировании».
Каждый курс или статья для начинающих автоматизаторов рассказывает об удобном и универсальном средстве поиска элементов Web-страницы, как XPath. Данный вид локаторов на элемент был создан в 1999 году для указания на элементы в XML файлах. С помощью встроенных функций XPath стал очень популярным инструментом поиска элементов на Web-странице. Если HTML код вашего приложения выглядит как-то так:
и вы не можете найти достойный XPath для кнопки “Нажми меня”, не стоит сразу бежать в сторону разработчика с просьбой о помощи. Есть отличная возможность воспользоваться 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 селекторов, которая позволит найти вам все ссылки или расширения файлов, это ^= и $= , но такая задача стоит не так часто, как поиск по вхождению значения у атрибута.
Немного о том, как найти потомков с одним и тем же тегом у предка. Начнем, как всегда, с примера:
Как найти второй 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-селекторы используются для стилизации HTML элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.
Необходимые знания: | Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS). |
---|---|
Цель: | Узнать, как работают CSS-селекторы. |
Что такое селекторы?
Вы уже встречались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.
Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special .
В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые вы встретите, определены в Спецификации селекторов 3 уровня, где вы сможете найти всю информацию о поддержке селекторов в браузерах.
Несколько селекторов
Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special ; я могу написать их так:
А могу написать короче — просто отделив селекторы запятыми:
Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:
В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.
При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.
В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.
Но если мы объединим селекторы, правило не применится ни к h1 , ни к классу: оно считается недействительным.
Типы селекторов
Понимание того, какой именно селектор вам нужен, очень помогает подобрать подходящий элемент. Сейчас мы разберём разные виды селекторов.
Селекторы тегов, классов и идентификаторов
К этой группе относятся селекторы HTML-элементов, таких как .
К группе относятся и селекторы классов:
или селекторы идентификаторов (ID):
Селекторы атрибутов
Эта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента:
или основываясь на значении атрибута:
Псевдоклассы, псевдоэлементы
К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс :hover , например, применяет правило, только если на элемент наведён курсор мыши
К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца
в нашем случае), действуя, как если бы тег оборачивал первую строку, а затем был стилизован.
Комбинаторы
И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент с помощью комбинатора дочерних элементов ( > ):
Продолжение
Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или вы можете двинуться дальше: нас ждут селекторы тегов, классов и идентификаторов.
Справка о селекторах
В таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами.
Читайте также: