Pseudo-Element and Pseudo-Class Selectors
In this lesson, we will study pseudo-selectors of two kinds. Let's begin! :)
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 ...