Експерименти
Експеримент 1: :hover.
Експеримент 2: :active.
Експеримент 4: :focus та :focus-visible.
Експеримент 6: псевдокласи положення у коді.
:first-child
Звертання до першого дочірнього
елементу в коді - тегу р.
Fugit corporis eum nostrum temporibus aperiam impedit.
Fugit corporis eum nostrum temporibus aperiam impedit.
Це тег span.
:first-of-type
Звертання до першого вказаного
об'єкту в коді - тегу р.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit corporis eum nostrum temporibus aperiam impedit.
Lorem ipsum dolor sit amet eum nostrum consectetur adipisicing elit.
:last-child
Звернення до останнього
дочірнього елементу в коді - тегу р
Fugit corporis eum nostrum temporibus impedit.
:last-of-type
Звертання до останнього
вказаного
об'єкту в коді - тегу р.
Це тег span.
:nth-child(2)
Шукає елемент за номером (в
данному випадку №2)
незалежно від назви
тегу. Це перший тег р.
А це другий тег р...
Це все ще тег span.
А це перший тег р.
:nth-of-type(2)
Шукає вказаний селектор за
номером (в данному випадку №2). І так, це другий
тег р.
Lorem ipsum.
:nth-child(odd)
Змінює всі непарні дочірні
елементи
Fugit corporis eum nostrum temporibus aperiam impedit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit corporis eum nostrum temporibus aperiam impedit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit corporis eum nostrum temporibus aperiam impedit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit corporis eum nostrum temporibus aperiam impedit.
:nth-of-type(even)
Змінює всі парні конкретні
теги.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit corporis eum nostrum temporibus aperiam impedit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit corporis eum nostrum temporibus aperiam impedit.
Lorem ipsum dolor sit amet adipisicing elit.
Fugit corporis eum nostrum temporibus aperiam impedit.
Fugit corporis eum nostrum temporibus aperiam impedit.
:nth-child(3n)
Змінює кожен 3-й дочірній елемент.
Fugit corporis eum nostrum temporibus aperiam impedit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit corporis eum nostrum temporibus impedit.
Fugit corporis eum nostrum temporibus aperiam impedit.
:nth-of-type(3n + 1)
Також змінює кожен 3-й
конкретний тег, але
починаючі з першого.
Fugit corporis eum nostrum temporibus aperiam impedit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit corporis eum nostrum temporibus aperiam impedit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit corporis eum nostrum temporibus aperiam impedit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit corporis eum nostrum temporibus aperiam impedit.
Fugit corporis eum nostrum temporibus aperiam impedit.
:nth-child(4n + 2)
Змінює кожен 4-й дочірній
елемент, починаючи з 2-го.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit corporis eum nostrum temporibus aperiam impedit.
:nth-of-type(4n + 5)
Також змінює кожен 4-й
конкретний тег, але
починаючі з 5-го.
Fugit corporis eum nostrum temporibus aperiam impedit.
Lorem ipsum dolor sit amet adipisicing
Fugit corporis eum aperiam impedit.
:not(selector)
Псевдоклас виключення. Застосовує вказані стилі, якщо об'єкт не має селектора в дужках.
В данному випадку стилі не застосувалися, бо об'єкт з класом .article12 має таки ще клас, вказаний в дужках псевдокласу :not.
:has(span)
Псевдоклас присутності. Стилі
застосовуються, бо об'єкт має "дитину", вказану
в дужках.
Fugit corporis eum nostrum impedit.
Це тег span...Fugit corporis eum nostrum impedit.
Експеримент 7: псевдоелементи ::before та ::after.
Тут використаний ::after.
- Тут використаний псевдоелемент ::before.
- Lorem ipsum dolor sit.
- Lorem ipsum dolor sit.
Практика
- Unlimited product updates
- Unlimited product
- Unlimited product
- 1GB Cloud storage
- Email and community support
Гра
Доведи до кінця
