Як працюють псевдокласи в css

Напевно кожен, хто працював з CSS, не раз впадав у відчай. Наприклад, коли намагався відцентрувати дочірній елемент по відношенню до батьківського, що є вельми нетривіальним завданням. У цій статті ми розглянемо ще більш складну тему - псевдокласи, один з видів селектор.

У цій статті ми познайомимося з двома типами псевдокласів:

Іноді складно зрозуміти, що таке псевдокласи і як вони працюють. Головна складність полягає в тому, що вони представлені в абстрактному вигляді. Тому для спрощення сприйняття використані схеми з DOM-деревами.

Розмітка і DOM-дерево

Зверніть увагу на HTML-код, наведений нижче. Він буде використовуватися у всіх прикладах в цій статті.

У наведеному вище фрагменті коду обираний елемент - тег . а його селектор - one-of-type.

Почнемо з того, що виберемо все, що є в DOM, а потім Отфильтруем.

Зверніть увагу, як був проведений вибір: в кожній секції (від 1 до 5) у елементів є загальний батьківський елемент. Приклад: батьківський елемент для першої секції - body. для другої секції - контейнер з класом main. і т. д. Кожна секція відповідає рівню вкладеності коду.

Так як в нашому випадку обирається елементом є елементи . то ми можемо зробити наступне:

Як працюють псевдокласи в css

Ми вибрали всі елементи в кожній секції і послідовно їх пронумерували зліва направо. Не забувайте, що порядок дуже важливий.

Тепер ми завершуємо частина роботи, пов'язану з вибраним елементом, і приступаємо до фільтрації.

Only-of-type проходить через всі секції, вибираючи тільки ті елементи . які є єдиними для своєї секції.

Зверніть увагу, що -елементи для першої і другої секцій не були відібрані з-за того, що вони не є єдиними для своїх секцій. Інакше кажучи: одна секція - один елемент .

Псевдоклас first-of-type (перший з обраного типу)

Давайте продовжимо з того, на чому зупинилися - з обраного елемента (мова йде про -тезі).

Селектор first-of-type вибирає кожен перший елемент в секції.

Як працюють псевдокласи в css

Код, який виконує умови наведеної вище схеми:

Ви можете подивитися як працює цей код в браузе на codepen.io.

Псевдоклас last-of-type (останній з обраного типу)

Last-of-type - повна протилежність псевдокласу first-of-type. Цей селектор вибирає останні елементи у всіх секціях.

елемент - перший і останній для секцій, в яких він представлений в однині.

Псевдоклас nth-of-type (n-й з обраного типу)

Тепер переходимо до найцікавішої частини статті. Розглянемо простий CSS з елементами математики зі шкільної програми.

Давайте визначимо наступний стиль, щоб подивитися на селектор в дії: