Привіт, в цій статті буде розказано, що ж таке псевдо-класи і псевдо-елементи в CSS. Що ж почнемо...

Вони використовуються для оформлення різних станів елементів. Найчастіше це використовують для оформлення різних станів посиляннь (наведений, натиснутий, відвіданий, і т.д.). Тому почнемо саме з цього.

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

Це є список станів посилання, яке вибирають вони (юзери).

Наприклад:

/* стан, коли на посилання наведено курсор миші */
a:hover {
    color: pink;
}

/* стан, коли посилання вже було відвідане */
a:visited {
    color: red;
}

/* стан коли курсор клавіатури знаходиться в полі для тексту */
textarea:focus {
    color: gray;
    border: 2px solid blue;
}

Також є ":first-child, і :last-child", які задають стиль першому і останньому відповідно.

":first-letter" - перша буква заголовку або параграфу.

":first-line" - перший рядок кожного параграфу.

Тобто синтаксис наступний:

селектор:псевдо-клас {
    //параметри
}

От і все! В принципі нічого складного, а багато корисного.