Від автора: досі ми вчилися знаходити елементи по їх атрибутам і станів. У 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.
