Chapter 18 : CSS Pseudo Elements
Sunday, 27 May 2012
0
comments
The Syntax
The syntax for pseudo elements is a bit different than that of regular CSS, but it’s real close. If you have already read chapter 11 then you are slightly ahead of the game.
selector:pseudo-element {property: value}
As you can see the only difference is that you place the pseudo element after the selector, and divide the 2 with a (:) colon.
selector.p:pseudo-element {property: value}
Using the above code would style all paragraphs within the declared selector with the pseudo element.
The elements:
- first-line
- first-letter
First Line
The first-line pseudo element styles the first line of text in a block level element.
p{font-size: small;}
p:first-line {font-size: medium; color: #ff0000;}
p:first-line {font-size: medium; color: #ff0000;}
As you can see in the above example paragraphs are set to be a small font size, but the p:first-line is set to be a medium size and a red color. The result is that the first line of all paragraphs will be red in color and a bit larger than the rest of the paragraph.
Though lets say you only want to style a certain paragraph of text with the first-line element. Thats where declaring a class to the pseudo element comes into play.
first-line with class
p.special:first-line {font-size: medium; color: #ff0000;}
I have declared a class of special within my css file.
First-Line Example
This is a special sentence I wrote to demonstrate the use and look of the first-line pseudo element. As you can see the first line of this paragraph is styled differently than the rest of the text within it. All of this was done by simply adding class=”special” to the opening <p> tag for this paragraph.
<p class=”special”>the content</p>
Where the first-line ends depends on the width of the browser window or containing element, you can resize this page and see that it adjusts as you change the size of the browser window.
The following properties can be assigned to the first-line pseudo element:
- background
- clear
- color
- font
- letter-spacing
- line-height
- text-decoration
- text-transform
- vertical-align
- word-spacing
First Letter
The first-letter pseudo element styles the first letter of text in a block level element.
p{font-size: small;}
p:first-letter {font-size: medium; color: #ff0000;}
p:first-letter {font-size: medium; color: #ff0000;}
As you can see in the above example paragraphs are set to be a small font size, but the p:first-letter is set to be a medium size and a red color. The result is that the first letter of all paragraphs will be red in color and a bit larger than the rest of the paragraph.
Though lets say you only want to style a certain paragraph of text with the first-letter element. Thats where declaring a class to the pseudo element comes into play.
first-letter with class
p.special_letter:first-letter {font-size: x-large; font-weight: bold; color: #ff0000;}
I have declared a class of special_letter within my css file.
First-Letter Example
This is a special sentence I wrote to demonstrate the use and look of the first-letter pseudo element. As you can see the first letter of this paragraph is styled differently than the rest of the characters within it. All of this was done by simply adding class=”special_letter” to the opening <p> tag for this paragraph.
<p class=”special_letter”>the content</p>
The following properties can be assigned to the first-letter pseudo element:
- background
- border
- clear
- color
- float
- font
- line-height
- margin
- padding
- text-decoration
- text-transform
- word-spacing
Categories:
CSS
