• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 7. Pseudo-Classes and Pseudo-Ele... > Pseudo-Elements in Selectors and Com...

7.8. Pseudo-Elements in Selectors and Combining Multiple Pseudo-Elements

By looking at the previous code examples covered in this chapter, you may have wondered how you can combine pseudo-selectors with other CSS properties, or how to differentiate between combinations of pseudo-elements. Pseudo-elements can be combined with classes in selectors so that they can be specifically selected. Pseudo-elements can also be tacked onto a selector. Listing 7.6, which is an adaptation of what was seen earlier in the first-line section, shows both pseudo-elements combined with classes at work.

Listing 7.6. Pseudo-Elements in Selectors

<title>pseudo-elements in selectors</title>
p.initial:first-line {font-variant: small-caps; color:
navy; font-size: 20pt;}
body p:first-letter {color: blue; font-size: 30pt;}
body {font-size: 20pt;}
<p class="initial">
The first line, and only the first line of this paragraph, should
be displayed in a navy color and in small caps, and because the
<code>initial</code> class is selected for this paragraph, the 
first letter of the first line will appear as a large, blue   
letter. All of the subsequent lines of this paragraph should   
appear in the default text color, which is black.
Here is some more text. The <code>first-line</code> and
<code>first-letter</code> pseudo-element values do not apply to
this sentence because it is outside of previous closed paragraph.
This is a new paragraph, but because the <code>initial</code> 
class is not selected, only the <code>first-letter</code>
value will be displayed.




Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint