Робота з селекторами CSS

CSS селектори – це відносно простий, швидкий, зручний і достатньо потужний інструмент для вибору елементів на веб-сторінці.

Спадковість елементів

У CSS-селекторах спадковість елементів вказується за допомогою використання пробілів та розділювачів:

• Пробіл: Використовується для пошуку елементів, які є дочірніми або будь-яким нащадком обраного елемента. Наприклад, div p знайде всі елементи <p>, що знаходяться всередині елементів <div>, незалежно від глибини спадковості.
• Розділювач > : Використовується для пошуку елементів, які є безпосередніми нащадками обраного елемента. Наприклад, div > p знайде всі елементи <p>, які є безпосередніми дочірніми елементами <div>.

Створення CSS-селекторів

При створенні CSS-селекторів важливо розуміти, як вони працюють та як правильно їх створювати. Передусім вам треба знати, що CSS-селектори дозволяють обирати елементи за їх тегами, класами, ідентифікаторами та атрибутами.

Для наочності розглянемо типові варіанти CSS-селекторів для такого коду: <div class="example" id="demo"><p>Привіт</p><div>

Пошук за тегом

Якщо потрібно вибрати всі елементи певного тегу, тоді просто використовуйте назву тегу як селектор.

Наприклад: для пошуку усіх тегів <div> можна написати селектор div, а для пошуку усіх тегів <p> використовуємо селектор p.

Відповідно: <input> → input ; <button> → button ; <select> → select і так далі.

Пошук за класом або ідентифікатором

Якщо потрібно вибрати елементи за їхнім класом або ідентифікатором, ми використовуємо спеціальні символи: крапку . для класу і хеш # для ідентифікатора. Наприклад, .example знайде всі елементи з атрибутом class="example", а #demo знайде елемент з атрибутом id="demo".

Комбінований пошук

Можна комбінувати різні умови, наприклад, .example p знайде всі елементи <p>, які знаходяться всередині елементів з class="example", незалежно від глибини вкладеності.

Пошук за псевдокласами

Псевдокласи дозволяють знаходити елементи відповідно до їхнього порядку або розташування всередині батьківського елемента.

• :first-child – знаходить перший дочірній елемент всередині свого батьківського елемента. Наприклад, якщо у вас є елемент <ul> всередині якого багато елементів <li>, то селектор li:first-child обере перший елемент <li> в цьому списку.
• :last-child – знаходить останній дочірній елемент всередині свого батьківського елемента. Наприклад, якщо у вас є елемент <ul> всередині якого багато елементів <li>, то селектор li:last-child вибере останній елемент <li> в цьому списку.
• :nth-child(odd) – знаходить кожен непарний дочірній елемент всередині свого батьківського елемента. Наприклад, якщо у вас є елемент <ul> всередині якого багато елементів <li>, то селектор tr:nth-child(odd) вибере кожен другий елемент <li>, починаючи з першого.
• :nth-child(even) – знаходить кожен парний дочірній елемент всередині свого батьківського елемента. Наприклад, якщо у вас є елемент <ul> всередині якого багато елементів <li>, то селектор tr:nth-child(even) вибере кожен другий елемент <li>, починаючи з другого.

Пошук за атрибутом

При створенні CSS-селекторів можна використовувати не лише класи та ідентифікатори, але й інші атрибути елементів, які вписуються в селектор у квадратні дужки [ ].

Пошук за елементом з наявністю певного атрибута

<button type="submit"> → button[type].

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

<button type="submit"> → button[type='submit'].

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

<button class="btn" type="submit"> → .btn[type='submit'].

Пошук за атрибутом, що містить певну підстроку

<a href="https://scramble.wiki/"> → a[href*='scramble.wiki']

Пошук за атрибутом, який починається з певної підстроки

<a href="https://scramble.wiki/"> → a[href^='https://']

Пошук за атрибутом, який закінчується певною підстрокою

<img src="captcha_image.png"> → img[src$='.png']

Примітка

Насправді я описав далеко не всі варіанти створення CSS-селекторів, проте цього має вистачити для переважної більшості випадків. З усім тим, на про всяк випадок раджу ознайомитись з селекторами XPATH, оскільки в нашій роботі час від часу виникають ситуації, коли XPATH підходить набагато краще.