Psuedo-Classes
In CSS, a “pseudo-class” is an event or state that can be triggered by the browser. When this event is triggered, additional CSS rules can be applied to a page.
The horribly obnoxious “Wrap-Up” page from Topic-07, utilized CSS pseudo-classes.
This is the same technology that allows browsers to alter the appearance of links when you hover over them, click them, or after you have visited them.
Like pseudo-elements, pseudo-classes are appended after a CSS selector.
NOTE: Pseudo classes are preceded by only a single colon, as opposed to a set.
/* A CSS Pseudo-Element Selector: */
p::first-letter {}
/* A CSS Pseudo-Class Selector: */
p:hover {}
Common Pseudo-Classes
NOTE: Any pseudo-class that relies upon mouse information (such as the ones below) will not translate to mobile devices.
:hover
The :hover class is triggered whenever a users mouse “hovers over” the selected element.
Hover is more often used to specify how link text will appear when a user hovers over it.
:active
The :active pseudo-class is applied when a user is clicking on an element.
Often this is used to make a button feel more real by slightly changing the color when the user presses it. But this can be used for any pressed effect.
{ TODO: }
- Read pages 290-298 of Chapter 12 in Duckett.
- Explore this area on our “Go Further With Fonts” page.