Псевдоклас – це певний стан, що виконується при домовлених раніше умовах.
Псевдокласи типу
Дозволяють вказати на конкретний тип дочірнього тегу. Створіть у папці psevdoklas файл psevdoklas.html такого зразка:
Для наочності заданий код представлено у вигляді dom-дерева, яке виглядає так:
Пронумеруємо дерево по секціях, це буде виглядати так:
в кожній секції (від 1 до 5) у елементів є загальний батьківський елемент. Приклад: батьківський елемент для першої секції - body, для другої секції - контейнер з класом main, і т. д. Кожна секція відповідає рівню вкладеності коду.
Так як в нашому випадку елементом, що обирається є елемент <a>, то можна їх теж пронумерувати (зліва направо!!!):Псевдоклас only-of-type (єдиний з обраного типу)
Only-of-type проходить через всі секції, вибираючи тільки ті елементи <a>, які є єдиними для своєї секції.Для застосування цього песвдокласу у css -файлі потрібно вказати такий код:
a:only-of-type {
border: 2px solid black;
}
Зверніть увагу, що <a> -елементи для першої і другої секцій не були відібрані з-за того, що вони не є єдиними для своїх секцій. Інакше кажучи: одна секція - один елемент <a>.Псевдоклас first-of-type (перший з обраного типу)
Селектор first-of-type вибирає кожен перший елемент <a> в секції.
Код, який виконує умови приведеної више схеми:
a:first-of-type {
border: 2px solid black;
}
Псевдоклас last-of-type (останній з обраного типу)
Last-of-type - повна протилежність псевдокласу first-of-type. Цей селектор вибирає останні елементи <a> у всіх секціях.
Елемент <a> - перший і останній для секцій, в яких він представлений в однині.
a:last-of-type {
border: 2px solid black;
}
Також є псевдокласи ":first-child, і :last-child", які задають стиль першому і останньому відповідно.":first-letter"
- перша буква заголовку або параграфу.":first-line
" - перший рядок кожного параграфу.Тобто синтаксис наступний:селектор:псевдо-клас { //параметри }
Немає коментарів:
Дописати коментар