Справочник по нотации CSS- и XPath-селекторов

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

1. Значение ID элемента

Идентификатор элемента в CSS определяется с помощью #, а в XPath с помощью [@id='example']. Идентификаторы должны быть уникальными в пределах DOM-дерева страницы.

Примеры:

CSS: #example

XPath: //div[@id='example']

2. Название тега

В предыдущем примере мы использовали запись //div в варианте для XPath. Это название тега, например, input для текстового поля или кнопки, img для изображения или a для ссылки. Можно выделять элемент просто по названию его тега.

Примеры:

CSS: input

XPath: //input

3. Название класса

В HTML-коде названия классов пишутся внутри значения атрибута class, и, если классов у атрибута несколько, они разделяются (или, точнее, объединяются) пробелом. Но в селекторах имена классов указываются немного по-другому – в CSS названия классов перечисляются через точку, либо отделяются точкой от других частей того же элемента селектора, например, от названия тега. В XPath классы указываются в квадратных скобках в атрибуте @class.

Примеры:

CSS: div.example

XPath: //div[@class='example']

4. Значение атрибута

У HTML-тегов может быть множество атрибутов, и можно находить теги просто по названиям и значениям этих атрибутов. В примерах ниже мы найдем тег input по атрибуту name и его значению «username»:

CSS: input[name='username']

XPath: //input[@name='username']

Также есть возможность искать элементы по значениям сразу нескольких атрибутов. Примеры:

CSS: input[name='login'][type='submit']

XPath: //input[@name='login'and @type='submit']

5. Частичное значение атрибута

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

Поиск элемента по префиксу значения атрибута:

CSS: a[id^='id_prefix_']

В данном случае мы найдем гиперссылку, у которой атрибут ID начинается на «id_prefix_». Поиск элемента по суффиксу значения атрибута:

CSS: a[id$='_id_sufix']

В данном случае мы найдем гиперссылку, у которой атрибут ID заканчивается на «_id_sufix». Поиск элемента по подстроке в значении атрибута:

CSS: a[id*='id_pattern']

В данном случае мы найдем гиперссылку, у которой атрибут ID содержит подстроку «id_pattern».

6. Объединение результатов нескольких селекторов

В примере с WhatsApp выше все исходящие сообщения можно найти с помощью селектора div. message-out, а все входящие сообщения с помощью селектора div. message-in. А что делать, если мы в одном списке хотим получить или перебрать и входящие, и исходящие сообщения, причем в том порядке, в котором они идут в чате? В CSS для этих случаев можно легко объединить списки элементов, полученные разными селекторами с помощью запятой. В XPath для этих же целей используется символ вертикальной черты.

Пример:

CSS: div.message-out, div.message-in

XPath: //div[@class=' message '] | //div[@class= 'message-in']

7. Непосредственный дочерний элемент

Страницы HTML имеют структуру, подобную XML, с дочерними элементами, вложенными в родительские. Прямой дочерний элемент определяется в CSS с помощью символа >, а в XPath с помощью символа /.

Примеры:

CSS: div > a

XPath: //div/a

8. Дочерний элемент ниже по иерархии

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

Примеры:

CSS: div a

XPath: //div//a

9. Следующий потомок

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

Представьте себе, что у вас в форме идут подряд два тега input, вот таких:

<input type = "text" class = "form-control" id = "username" name = "username" placeholder = "username" required autofocus></br>

<input type = "password" class = "form-control" id = "password" name = "password" placeholder = "password" required>

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

#username + input

А в XPath вот так:

//input[@id='username']/following-sibling:input[1]

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

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

Селектор ниже выделит четвертый по счёту тег LI на заданном уровне иерархии:

CSS: li:nth-of-type(4)

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

CSS: li:nth-child(4)

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

//li[4]