Pseudo-classes
Joel Ross
LIS 549
In this video...
-
Pseudo-class Selectors
-
Styling hyperlinks
Pseudo-classes
A pseudo-class is a selector that applies to an element based on its state or context (how the element is used). Written after a colon : after another selector part:
/* Selects <a> elements that are being hovered over */
a:hover {
font-size: 200%;
}
/* Selects the <tr> inside of a <table>, where the <tr>
* is the last child with that type */
table tr:last-of-type {
border-bottom: 5px solid black;
}
/* Selects "even numbered" <li> elements */
li:nth-of-type(2n) {
background-color: grey;
}
Avoid using :hover
Modifying appearance based on :hover is not a good idea:
- It isn't accessible -- a screen reader cannot "hover"
- It won't work on mobile devices -- you can't "hover" with your finger
- Changing element appearance (e.g., size) can have cascading impacts on page layout, making it hard to read and interact with
Styling Hyperlinks
Hyperlinks (<a> elements) come with their own default styling; you may need to override this to get the desired appearance.
Hyperlinks also support a few different pseudo-classes:
/* Applies to <a> elements that have NOT been visited */
a:link { }
/* Applies to <a> elements that HAVE been visited */
a:visited { }
/* Applies to <a> elemeents that have focus. You can see
* focus when you use the `tab` key to navigate a page
* Relevant to screenreaders */
a:focus { }
/* Applies to <a> elements that are "activated"
* (e.g., clicked by a user) */
a:active { }
Rule Order
/* Applies to <a> elements no matter the state */
a:link, a:visited, a:hover, a:focus, a:active {
...
}Because these selectors will often apply at the same time (and thus override each other), you need to make sure to apply them in LVHFA order (:link, :visited, :hover, :focus, :active).
To make a link always look the same, use a group selector!
lis549-pseudo-classes
By Joel Ross
lis549-pseudo-classes
- 535
