Псевдокласи типу

Псевдоклас – це певний стан, що виконується при домовлених раніше умовах.

Псевдокласи типу

Дозволяють вказати на конкретний тип дочірнього тегу. Створіть у папці 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" - перший рядок кожного параграфу.

Тобто синтаксис наступний:
селектор:псевдо-клас {
    //параметри
}