Структурні псевдокласи CSS

20

Від автора: досі ми вчилися знаходити елементи по їх атрибутам і станів. У CSS3 також можна шукати елементи просто по їх положенню в розмітці. Ці селектори носять назву структурні псевдокласи CSS.

Може бути, це звучить заплутано, але все стане зрозумілим, коли ми розглянемо способи їх застосування. Ці селектори підтримуються в IE9 і вище, а також в останніх і більш старих версіях всіх інших браузерів за винятком IE8 і нижче:

:root — Кореневий елемент – в HTML-файлах це html.

E:nth-child(n) — Елемент E, який є n-вим дочірнім елементом батьків. Параметр n пояснюється в замітці нижче.

E:nth-last-child(n) — Елемент F, є n-вим дочірнім елементом батьків E при відліку із зворотного боку.

li:nth-last-child(1) – останній елемент списку, то ж саме що і li:last-child. (див. примітку нижче)

E:nth-of-type(n) — N-ий елемент даного типу всередині батьків. Різниця між :nth-child :nth-of-type пояснюється в замітці нижче.

E:nth-last-of-type(n) — Як nth-of-type(n), тільки відлік йде з останнього елемента всередині батьків.

Примітка: параметри структурних селекторів

Існує 4 псевдокласу, які в якості параметра приймають вираз an+b, odd або even. До структурних псевдоклассам відносяться :nth-child(an + b), :nth-last-child(an + b), :nth-of-type(an + b): nth-last-of-type(an + b). У виразі an+b символ a є цілим множником, b – цілий зрушення, n – змінна.

У найпростішому випадку всередину можна передати ціле число. Наприклад, E:nth-of-type(3) знайде третій E всередині одного з батьків. Можна передати одне або два ключових слова odd або even. Також можна передавати вирази типу E:nth-of-type(3n+1). 3n – кожен третій елемент (частота), +1 – зрушення. Зсув за замовчуванням дорівнює 0. Тобто :nth-of-type(3n) знайде 3-й, 6-й і 9-й елементи, а :nth-of-type(3n+1) знайде 1-й, 4-й і 7-й елементи і т. д.

Можна передавати негативні зрушення. В основі CSS лежить лінгвістичний мову, не програмний, тому відлік починається з 1, а не з 0. Між множником та змінної a n не повинно бути пробілів, зрушення йде останнім.

З допомогою цих числових псевдокласів можна визначити елементи, не додаючи до них класи. Найпоширеніший приклад – таблиця, в якій кожна наступна рядок злегка темніше, щоб було зручно читати. Раніше для цього потрібно було використовувати odd і even на тезі tr. Зараз можна просто застосувати tr:nth-of-type(odd) для вибору всіх непарних рядків і не чіпати розмітку. Можна піти ще далі і прикрасити таблицю трьома кольорами: беремо tr:nth-of-type(3n), tr:nth-of-type(3n+1) і tr:nth-of-type(3n+2) і застосовуємо різні кольори.

E:first-child — Елемент E, якщо E – перша дитина всередині батьків. Те ж саме що E:nth-child(1).

E:last-child — Елемент E, якщо E – останній дитина всередині батьків. Те ж саме що E:nth-last-child(1).

:first-of-type — Те ж що і :nth-of-type(1).

E:last-of-type — Те ж що і :nth-last-of-type(1).

E:only child — Елемент E, якщо E – єдина дитина всередині батьків.

E:only-of-type — Елемент E, якщо E – єдиний елемент типу E, який є прямим дитиною від батьків.

Замітка: child або type

Працюючи зі структурними селекторами nth-of-type і nth-child, важливо зрозуміти, що таке child і type. Child шукає всі дочірні елементи, які підпадають під вираження, а також перевіряє попередній елемент на збіг. Type шукає всі елементи, що збігаються спочатку з першою частиною селектора, після чого перевіряється вираз.

На прикладі p:nth-child(3n) браузер шукає кожен третій дочірній елемент батьків. Якщо дочірній елемент p, то збіг є, якщо ні – збігу немає. У випадку з p:nth-of-type(3n) браузер шукає всі дочірні теги p батьків, після чого знаходить кожен третій p.

Структурні псевдокласи засновані на батьків і скидають рахунок для нових батьків. Вони дивляться тільки на прямих нащадків. Текстові вузли не входять у вираз.

E:empty — Елемент без нащадків. Це можуть бути текстові вузли.

hello

і

не підійдуть під p:empty, а

і

підійдуть. Цей селектор також знаходить порожні елементи типу
і . В CSS Selectors Level 4 з’явиться p:blank, який буде знаходити

.

E:lang(en) — Елемент мови, позначений двома літерами, наприклад, en. На відміну від E:[lang|=en], де повинен бути атрибут lang, селектор E:lang(en) знайде E, якщо мова був оголошений на самому елементі або будь батька.

E:not(exception) — Дуже корисний селектор: знаходить елементи, які не підпадають під селектор в дужках.

Селектори з псевдоклассом :not знаходять все, що зліва від двокрапки і віднімають елементи праворуч від двокрапки. Спершу елементи знаходяться по лівій частині селектора. Наприклад, p:not(.copyright) знайде всі параграфи в документі і тільки потім прибере з них параграфи з класом copyright. Можна зчепити кілька псевдокласів :not. input:not([type=checkbox]):not([type=radio]) знайде всі теги inpu
t на сторінці за винятком типів checkbox і radio.