Назад Вперед Зміст

Завдання

Популярні псевдокласи CSS

Ви можете задавати елементам стиль, який залежатиме від стану цих елементів. Ось список деяких псевдокласів:

• :link – цей псевдоклас задає стиль посиланням, по яких користувач ще не переходив;
• :visited – цей навпаки застосовує стиль до вже відвіданих посилань;
• :hover – визначає стиль елемента, коли на нього наведений курсор (може застосовуватися не тільки до посилань);
• :active – задає стиль активному посиланню (тобто в момент кліку по ньому);
• :focus – застосовує стиль до елемента при фокусі на ньому (наприклад, при встановленні курсору в рядок пошуку);
• :not() – цей корисний псевдоклас дозволяє вибрати і стилізувати тільки ті елементи, які не містять селектор, вказаний у дужках.

Популярні псевдоелементи CSS

Якщо псевдокласи записуються з одним двокрапкою, то псевдоелементи – з двома. Це було впроваджено в CSS3 для того, щоб розрізняти псевдокласи і псевдоелементи між собою. Проте раніше такої різниці не було і з псевдоелементами використовували один двокрапку. Зараз браузери підтримують обидва варіанти написання (але не для всіх випадків). Розглянемо деякі псевдоелементи:

• ::after – використовується разом зі властивістю content і дозволяє вивести необхідні дані після вмісту елемента;
• ::before – виконує схожу функцію, що й попередній, тільки виводить дані перед вмістом елемента;
• ::selection – цей псевдоелемент розпізнається браузерами тільки при використанні двох двокрапок і дозволяє встановити колір і фон для тексту, який виділено користувачем;
• ::first-letter – використовується для зміни стилю першої літери в тексті елемента;
• ::first-line – використовується для зміни стилю першого рядка тексту елемента.

Завдання

Для розв’язання завдань цього блоку вам знадобляться наступні псевдокласи і псевдоелементи: first-child, last-child, nth-child, nth-last-child, only-child, first-of-type, last-of-type, nth-of-type, nth-last-of-type, only-of-type.

1. Повторіть сторінку за наведеним зразком (перший світиться червоним кольором, останній — зеленим):

   

2. Повторіть сторінку за наведеним зразком (всі li, крім третього, пофарбовані в оранжевий колір, а третій — у темно-синій колір):

   

3. Повторіть сторінку за наведеним зразком (фон темно-синій, парні li пофарбовані в жовтий колір, непарні — у блакитний):

   

4. Для розв’язання знадобляться наступні псевдокласи і псевдоелементи: disabled-enabled. Повторіть сторінку за наведеним зразком (незаблокований input світиться зеленою тінню, а заблокований — червоною):

   

5. Для розв’язання знадобляться наступні псевдокласи і псевдоелементи: checked. Повторіть сторінку за наведеним зразком (червоним кольором підсвічується той тег label, який знаходиться після відміченого чекбокса або радіо):

   

6. Для розв’язання знадобляться наступні псевдокласи і псевдоелементи: focus. Повторіть сторінку за наведеним зразком:

   

   

7. Для розв’язання знадобляться наступні псевдокласи і псевдоелементи: empty. Повторіть сторінку за наведеним зразком (порожня li має маркер і фіолетову межу):

   

8. Для розв’язання знадобляться наступні псевдокласи і псевдоелементи: target. Повторіть сторінку за наведеним зразком (при переході за посиланням відповідний блок підсвічується):

   

9. Для розв’язання знадобляться наступні псевдокласи і псевдоелементи: nth-child, hover, select, first-letter, after. Повторіть сторінку за наведеним зразком (при наведенні на слово МОРЕ з’являється слово СОНЦЕ на помаранчевому фоні, виділений текст абзацу підсвічується фіолетовим фоном з білими буквами):

   

Назад Вперед Зміст