Pseudo-Element and Pseudo-Class Selectors
Explore how to apply CSS pseudo-element selectors for styling specific parts of elements like the first letter or line, and pseudo-class selectors to change styles based on element states such as hover, focus, and checked. Understand how these selectors enhance styling precision and interactivity in web pages.
We'll cover the following...
Pseudo-element selectors
CSS3 defines a pair of pseudo-element selectors, :first-letter and :first-line.
They are called pseudo-elements because they refer to parts of existing HTML tags, such as the first line of a paragraph, and not to entire HTML nodes in the document tree.
The Listing below shows an example that makes it easy to understand how they work.
Listing: Using :first-letter and :first-line selectors
<!DOCTYPE html>
<html>
<head>
<title>Pseudo-element selectors</title>
<style>
body {
font-family: Verdana, Helvetica, sans-serif;
}
p:first-line { font-weight: bold; }
p:first-letter { font-size: 2em; }
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit fusce vel sapien elit
in malesuada semper mi, id sollicitudin
urna fermentum ut fusce varius nisl ac ipsum
gravida vel pretium tellus tincidunt integer.
</p>
</body>
</html>
Explanation
This example demonstrates both pseudo-element selectors. They are used in the context of p, such as p:first-line, and p:first-letter, so they provide formatting for the first line and the first letter of every single <p> tag in the sample.
It seems obvious, but it is still worth confirming: first-line is applied to the first line of the paragraph by means of rendering, and not the first line of the markup as written in the source.
The image below shows how the example page is displayed.
You can also use a third pseudo-element, ::selection, that represents a part of the document that has been highlighted by the user, including text in editable text fields.
Only a small subset of CSS properties can be used in rules that apply to this pseudo-element.
Pseudo-class selectors
There are a few selectors that allow you to specify style settings for HTML elements in a particular state. For example, you may apply a different style to links when the mouse hovers above them, or input text boxes with invalid data. These selectors are called pseudo-class selectors.
The :link and :visited, selectors
Two of them, namely :link and :visited are applied only to links. You can set the style of a link element that is determined to be unvisited or visited with :link and :visited.
The :active selector
Another pseudo-class, :active, matches any element that’s in the process of being activated. It would apply, for instance, for the duration of a mouse-click on a link, from the point at which the mouse button pressed down until the point at which it’s released again.
The :hover selector
The :hover pseudo-class matches any element that’s being hovered by a pointing device (the cursor is hovered over the box generated by the element).
The :focus selector
When an element in the page is ready to receive user input, its style can be marked with the :focus pseudo element. Evidently, :focus can apply to a form control or to a link if the user navigates using the keyboard.
The :disabled and :enabled selectors
It is a common web design task to set up the style for user interface elements that are disabled. You can use the :disabled and :enabled pseudo-classes for this purpose.
The :checked selector
You can also style checkboxes or radio buttons that are checked or toggled to the “on” state with the :checked selector.
The Listing below demonstrates using the :hover selector.
Listing: Using the :hover selector
<!DOCTYPE html>
<html>
<head>
<title>Pseudo-element selectors</title>
<style>
body {
font-family: Verdana, Helvetica, sans-serif;
}
a:hover {
border: 2px solid blue;
background-color: aliceblue;
padding: 2px 4px;
}
</style>
</head>
<body>
<h1>My favorite links</h1>
<a href="http://msdn.com">MSDN</a>
<br/>
<a href="http://visualstudio.com">
Visual Studio Services Home
</a>
<br/>
<a href="http://visualstudiogallery.com">
Visual Studio Extensions
</a>
<br/>
</body>
</html>
As shown in the image below, the a:hover rule is applied when you move the mouse over any link.
The HTML page represents a hierarchy, and you often need to select elements using the ideas in regard to this hierarchy such as descendent elements, children, and siblings. CSS provides simple syntax to allow building selectors that work with these concepts.
Achievement unlocked! 🎉
Congratulations! You’ve learned to make use of pseudo-selectors in CSS!
Good job! Give yourself a round of applause!
