- The Element Family Tree
- Defining Styles Based on Context
- Working with Pseudo-classes
- Working with Pseudo-elements
- Defining Styles Based on Tag Attributes
- NEW IN CSS3: Querying the Media
- Inheriting Properties from a Parent
- Making a Declaration !important
- Determining the Cascade Order
- Putting It All Together
This chapter is from the book
This chapter is from the book
This chapter is from the book
Working with Pseudo-elements
A pseudo-element is a specific, unique part of an element—such as the first letter or first line of a paragraph—that can be styled independently of the rest of the element. (For a list of other pseudo-elements, see Table 4.5.)
Table 4.5 Pseudo-Elements
|
Format |
Name |
Elements Are Styled If... |
Compatibility |
|
:first-letter, ::first-letter |
the first Letter |
first letter in text |
IE5.5, FF1, O3.5, S1, CSS1 |
|
:first-line, ::first-line |
the first line of text |
they are the first line of text |
IE5.5, FF1, O3.5, S1, CSS1 |
|
:after, ::after |
After |
space immediately before element |
IE8, FF1, O5, S1, CSS2 |
|
:before, ::before |
Before |
space immediately after element |
IE8, FF1, O5, S1, CSS2 |
)
Working with first letters and lines
You can access the first letter of any block of text directly using the :first-letter pseudo-element. The first line of any block of text can be isolated for style treatment using the :first-line pseudo-element.
To highlight the beginning of an article:
- Style the default version of the element.
article p {...}Although not required, it’s generally a good idea to set the default style of the selector for which you will be styling the :first-letter pseudo-element (Code 4.11).
Code 4.11. Styles are set for the first letter and first line of the first paragraph in an article
.
<!-- HTML5 --> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>...</title> <style type="text/css" media="all">
article p {font-size: 16px;line-height: 24px;color: rgb(102,102,102) }article p:first-of-type:first-letter {color: red;font-size: 3em;float: left;margin-right: 5px; }article p:first-of-type:first-line {font-size: 1.25em;font-weight: bold;color: rgb(0,0,0); }</style> </head> <body> <article> <h1>Alice's Adventures in Wonderland</h1> <p>The moment Alice appeared,...</p> <p>The executioner's argument was,...</p> <p>The King's argument was,...</p> </article> </body> </html> - Style the first letter of the element if it is the first of its type. Type the selector you want to style the first letter of (article p), a colon (:), and then first-letter.
article p:first-of-type: first-letter {...}To affect only the first paragraph in an article, you can add the :first-of-type pseudo-class, as in this example.
- Style the first line of the element’s text if it is the first of its type. Type the selector (article p) for which you want to style the first letter, a colon (:), and then first-line.
article p:first-of-type: first-line {...}In this example, the first-of-type pseudo-class is added so that only the first paragraph in an article is styled.
- The element’s first letter and first line of text is styled if it is the first of its type in the parent element. Add the class attribute to the relevant HTML tag.
<p>...</p>
Although you do not have to use a class, you generally will want to selectively style the first letter of elements rather than styling them all universally.
)
Setting content before and after an element
The :before and :after pseudo-elements can be used to generate content that appears above or below a selector. Generally, these pseudo-classes are used with the content property. (See “Adding Content Using CSS ” in Chapter 9.) The pseudo-elements let you add and style repetitive content to the page in a consistent way.
To set content before and after an element:
- Style the element.
h1 {...}Although not required, it’s generally a good idea to set the default style of the selector for which you will be styling the :before and:after pseudo-elements. (See Code 4.12.)
Code 4.12. Before and after pseudo-elements are used to add content—images
, in this case—to the page header 
.
<!-- HTML5 --> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>...</title> <style type="text/css" media="all">
h1 {font-size: 2em;color: red;font-style: italic; }h1:before {content: url('../_images/bullet-01.png'); }h1:after {content: url('../_images/bullet-02.png'); }</style> </head> <body> <h1>Alice's Adventures in Wonderland</h1> <p>The moment Alice appeared,...</p> <p>The executioner's argument was,...</p> <p>The King's argument was,...</p> </article>had a head could be beheaded, and that you weren't to talk nonsense.</p> </article> </body> </html> - Add content before the element. Type the selector (HTML, class, or ID) you want to add content before, a colon (:), and then the keyword before.
h1:before { content:... }Next, declare the content property and define what generated content goes before the element and how it should be styled.
- Add content after the element. Type the selector (HTML, class, or ID) you want to add content after, a colon (:), and then the keyword after.
h1:after { content:... }Next, declare the content property and define what generated content goes after the element and how it should be styled.
)
)