Селектори псевдо-класів
Псевдо-класи застосовують стиль до елементів відповідно до їх стану, який може змінюватися за допомогою дій користувача, а також може залежати від розташування елемента в дереві документа. Селектори псевдо-класів починаються з двокрапки - "." І зазвичай додаються відразу ж після селектора типу без додаткових пробілів між ними:
Наведений вище код містить чотири CSS правила. При цьому в кожному з селектор використовується псевдо-клас. Перше правило задає колір для посилань, за якими користувачі ще не переходили, якщо користувач перейшов за посиланням, то буде використано друге правило. Псевдо-класи: hover і: active динамічно змінюють відображення посилання. hover стилізує посилання тільки в той час, коли над нею знаходиться покажчик миші, а: active тільки тоді, коли користувач вже клацнув по посиланню, але кнопка ще утримується.
Псевдо-класи: hover і: active формально називають динамічними, оскільки вони застосовують стиль тільки при взаємодії користувача з відповідними елементами шляхом наведення курсору миші і клацання по посиланню відповідно.
Примітка. hover, крім посилань, можна використовувати і з іншими елементами, що дозволяє створювати ефекти на зразок підсвічування рядки таблиці при наведенні на неї курсора миші. Однак браузер IE6 і більш ранні версії підтримують використання даного псевдо-класу виключно з елементами .
підкреслення посилань
Псевдо-класи: first-child і: last-child
Ще одним прикладом псевдо-класів є: first-child і: last-child. Псевдо-клас: first-child посилається на перший по порядку дочірній елемент позначеного батька, на відміну від нього: last-child працює навпаки, він посилається на останній дочірній елемент:
Оскільки перший абзац є першим дочірнім елементом для