Псевдокласи в css, уроки, webreference
Ми бачили в основному три типи селекторів CSS:
- звичайні. де р в CSS націлюється на HTML-елементи
;
- класи. де .intro в CSS націлюється на елементи з атрибутом class = "intro";
- ідентифікатори. де #logo в CSS націлюється на елемент з атрибутом id = "logo".
До всіх цих селекторам можуть прикріплятися псевдокласи. псевдоклас:
- визначає конкретний стан елемента;
- це ключове слово, яке починається з двокрапки.
Псевдоклас не може існувати сам по собі. Він повинен бути прикріплений до селектора. Псевдоклас визначатиме тільки певний стан цього селектора.
Синтаксис виглядає наступним чином:
Прогалини між селектором і псевдоклас немає. щоб показати, що вони пов'язані один з одним.
Перший рядок у CSS визначає, що всі елементи повинні виглядати синіми. Другий рядок визначає, що при наведенні покажчика миші повинні виглядати червоними.
Другий рядок орієнтована на ті ж елементи HTML. але тільки. коли відбувається щось конкретне (в даному випадку, наведення).
Цей псевдоклас націлюється на посилання, які вже були відвідані. За замовчуванням посилання відображаються синіми і при відвідуванні стають фіолетовими. Результати Google працюють так само.
Міняти колір відвіданих посилань часто забувають, але користувачам так зручніше переглядати список результатів. Це допомагає їм легко визначати, де вони вже були.
Даний псевдоклас відбувається, коли елемент HTML отримує фокус. Це особливо корисно для полів форм.
Правило outline: none видаляє світіння навколо поля.
: First-child і: last-child
Ці псевдокласи пов'язані з ієрархією в HTML. Вони націлюються на елементи HTML в залежності від порядку. в якому вони з'являються в коді.
Як ви можете бачити, жоден стильовий клас не застосовується до першого і останнього
Якби нам знадобилося додати п'ятий пункт списку, то застосовуючи той же CSS, стилізація автоматично зміниться.
: Nth-child
Даний псевдоклас є глобальною версією: first-child і: last-child. За допомогою: nth-child ви можете вирахувати конкретний дочірній цільової елемент.
Наприклад, якщо ви хочете націлитися на другий дочірній елемент, то використовуйте: nth-child (2).
odd і even
Крім використання чисел. nth-child поставляється з двома ключовими словами:
- : Nth-child (odd) націлена на кожен непарний елемент;
- : Nth-child (even) націлена на кожен парний елемент.
Потужним аспектом: nth-child є те, що він може націлюватися на елементи, грунтуючись на розрахунках за допомогою ключового слова n.
Значення n підвищується від 0 до кількості представлених дочірніх елементів.
Що робити, якщо ви хочете націлитися на кожен третій елемент?
У нашому випадку n починається з нуля і закінчується шістьма.
Комп'ютери починають відлік з нуля. І оскільки в нашому списку сім елементів, ми будемо вважати до шести, тому що 0-1-2-3-4-5-6 представляють сім пунктів.
Ви можете прочитати: nth-child (3n) як «націлитися на кожен елемент, положення якого ділиться на 3». У нашому випадку, це третій і шостий пункт списку:
- 3 помножити на 0 дорівнює нулю;
- 3 помножити на 1 - третій пункт;
- 3 помножити на 2 - шостий пункт.
Що робити, якщо ви хочете націлитися на перший пункт і кожен третій пункт після нього?
3n + 1 складається з двох частин:
Ось як були виконані обчислення:
- 3 помножити на 0 плюс 1 дорівнює 1;
- 3 помножити на 1 плюс 1 дорівнює 4;
- 3 помножити на 2 плюс 1 дорівнює 7.
Лічильник n є дуже гнучким. Якщо обчислення робити складно, то просто протестуйте, щоб отримати правильну вибірку.
інші псевдокласи
Є десятки доступних псевдокласів. деякі з них призначені для дуже специфічних станів. Ми описали найбільш використовувані з них.