Псевдокласи

Русский перевод: Псевдоклассы

Псевдокласи – це атрибути, які призначаються строго до селекторів з наміром визначити реакцію або стан для даного селектора. Вони володіють наступною структурою: selector: pseudo class {property: value;}, тобто вам лише треба помістити двокрапку між селектором і псевдокласом.

Ви побачите, що багато браузерів не підтримують ряд положень CSS. Однак існуючі чотири псевдокласи можуть застосовуватися без будь-якого страху, якщо застосовуються до посилань:

link використовуються для невідвіданих посилань.
visited використовується для посилання на сторінку, яку вже відвідали.
active використовується, коли користувач клацає по посиланню.
hover використовується, коли користувач наводить курсор на посилання.

a.snowman:link {
    color: blue;
}
a.snowman:visited {
    color: purple;
}
a.snowman:active {
    color: red;
}
a.snowman:hover {
    text-decoration: none;
    color: blue;
    background-color: yellow;
}

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

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

Псевдоклас hover можна використовувати в комбінації з іншими елементами, не тільки з посиланнями. На жаль, цей метод не підтримується браузером Internet Explorer. Це по справжньому засмучує, тому ви можете вдаватися до прекрасних дизайнерським трюкам, які дозволяють створювати чарівні ефекти в інших браузерах.

← Скорочення властивостей | Кольори →