Псевдокласи в css
Вивчаємо псевдокласи в CSS
Добрий день, друзі, сьогодні розберемо поняття псевдокласу в мові CSS (різницю між псевдоклас і псевдоелементи дивіться в кінці статті).
Псевдокласи - це спеціальні команди, за допомогою яких можна реалізовувати більш тонку вибірку елементів і задавати їм CSS-властивості, а також відтворювати деякі анімаційні ефекти.
Звичайна схема псевдокласу в CSS, виглядає наступним чином:
Перед ім'ям псевдокласу, ставиться двокрапка.
Поширений приклад псевдокласу, це зміна зовнішнього вигляду елемента, при наведенні на нього курсора миші. Наприклад ви можете побачити цей ефект, якщо наведете курсор миші на посилання знаходиться в бічному меню: знизу у посилання з'явиться підкреслення. Цей анімаційний ефект, з'являється завдяки псевдоклас: hover.
В CSS-коді це виглядає наступним чином:
За допомогою псевдокласу: hover. крім посилань також можна змінювати зовнішній вигляд і інших елементів. Наприклад на моєму сайті для вебмайстрів. відбувається підсвічування рядків таблиці при наведенні на них курсором миші, даний ефект ви можете побачити в статті Кольори в CSS
В CSS-коді це виглядає наступним чином:
Які псевдокласи існують в CSS?
Розглянемо, які псевдокласи існують в мові CSS.
Псевдокласи працюють зі станом елемента
Псевдокласи застосовуються до елементів форми
- : Checked - задає CSS-властивості при виділенні елементів форми, таких як прапорці (radio) або переключаетелі (checkbox)
- : Disabled - задає CSS-властивості відключеним (заблокованим) елементам форми
- : Enabled - задає CSS-властивості включеним (звичайним) елементам форми
- : Optional - задає CSS-властивості не обов'язковим для заповнення елементів форми input. у яких відсутній атрибут required
- : Required - задає CSS-властивості обов'язковим для заповнення елементів форми input. у яких є атрибут required
Псевдокласи працюють з деревом елементів
- : First-child - задає CSS-властивості першого нащадку батька (батько нащадок: first-child <> )
- : Last-child - задає CSS-властивості останньому нащадку батька
- : First-of-type - задає CSS-властивості першого нащадку батька за типом
- : Last-of-type - задає CSS-властивості останньому нащадку батька за типом
- : Nth-child - задає CSS-властивості нащадкам батька на основі їх нумерації в структурі HTML-документа або всередині батька (: nth-child (odd | even | число | вираз))
- : Nth-last-child - то ж що і: nth-child. тільки нумерація йде з кінця
- : Nth-of-type - задає CSS-властивості нащадкам елемента по типу, на основі їх нумерації в структурі HTML-документа або всередині батька (: nth-of-type (odd | even | число | вираз))
- : Nth-last-of-type - то ж що і: nth-of-type. тільки нумерація йде з кінця
- : Only-child - задає CSS-властивості елементу нащадку, за умови що він єдиний у батька
- : Only-of-type - задає CSS-властивості елементу нащадку по типу, за умови що він єдиний у батька
Під батьком тут розуміється звичайний селектор, в якому знаходяться дані елементи.
решта псевдокласи
Різниця між псевдоклас і псевдоелементи полягає в наступному: псевдоклас задає стиль для елемента сторінки. а псевдоелемент задає стиль для частини елемента сторінки і навіть може створювати додаткову частину.
На цьому поки все, хочете дізнатися Різницю між псевдоклас nth-child і nth-of-type. тоді ласкаво просимо в наступний урок 🙂
Дитячі татарські вірші - для малюків та їхніх батьків, які беруть участь на ранках у дитячому садку.