На простых страницах часто можно сразу обратиться к нужному элементу для извлечения данных. Однако такой подход не всегда реализуем. Например, работа ведется на странице, которая содержит два элемента, имеющих один класс, но разнесенные в разные родительские блоки. Как заставить скрипт выбрать нужный?
В качестве примера рассмотрим ситуацию, когда два тега <p> включают два одинаковых класса text, нам нужен родительский элемент с классом author. Для таких ситуаций и нужен селектор.
В составном селекторе символ пробела позволяет указать элементы, которые находятся внутри родительского блока, уровень вложенности при этом не имеет значения.
.author .text
Такая конструкция означает, что нам необходимо найти тег с классом text, у которого есть родительский тег с классом author. Между ними могут быть другие теги, они могут находиться на любом уровне вложенности.
Дочерние элементы или потомки
Символ «>» вместо пробела позволяет явно указать на необходимость найти дочерние элементы относительно указанного родительского. В контексте процесса парсинга это означает, что селектор будет отслеживать уровни вложенности, поиск будет более строгим.
.img_box > .name_item
В данном примере выбирается элемент с классом name_item, который при этом является дочерним элементом элемента с классом img_box.
Поиск по порядковому номеру дочернего элемента
#description > li:nth-child(4)
Такая конструкция также бывает полезной, особенно при работе со списками. Функция :nth-child() позволяет выбрать элемент по порядковому номеру в списке дочерних элементов. Может пригодиться, если нет других способов обозначить нужный элемент. В данном примере будет найден четвертый элемент в указанном списке.
Поиск по HTML-структуре начинается с 1, хотя в программировании принято в качестве стартового элемента использовать 0. Стоит учитывать данную особенность, чтобы избежать ошибок в силу привычки.
Использование нескольких классов
Может возникнуть ситуация, когда HTML-элемент имеет два класса (class1 и class2) и нам нужно указать для поиска именно наличие сразу двух классов. В этом случае конструкция будет выглядеть следующим образом:
.class1.class2
Запись должна быть без пробелов, это важно. В практике действительно возникает ситуация, когда отдельный класс не позволяет настроить нужную фильтрацию.
Если классов будет больше, чем указано в составном селекторе, то элемент также будет найден.