Home arrow Style Sheets arrow Page 2 - Learn CSS, part 7: Pseudo Elements
STYLE SHEETS

Learn CSS, part 7: Pseudo Elements


We have discussed CSS selectors in the last three articles in this sereis. We have said that a selector can be a markup element, an attribute selector based on the class and ID attributes, or a structured selector based on the document structure. CSS introduces pseudo elements, which we will be discussing in this article. This is one area of functionality that you can't achieve using HTML, and you will be amazed how easily you can achieve it in CSS.

Author Info:
By: Michael Youssef
Rating: 5 stars5 stars5 stars5 stars5 stars / 28
June 27, 2005
TABLE OF CONTENTS:
  1. · Learn CSS, part 7: Pseudo Elements
  2. · Using the ::first-line Pseudo Element
  3. · Using the ::first-letter Pseudo Element
  4. · Using the ::selection Pseudo Element
  5. · The Content Property
  6. · The ::before and ::after Pseudo Elements

print this article
SEARCH DEVARTICLES

Learn CSS, part 7: Pseudo Elements - Using the ::first-line Pseudo Element
(Page 2 of 6 )

CSS introduced the ::first-line pseudo element, which gives you the ability to apply styling rules to the first line of any block level element, such as the <p> and the <div> elements (we will discuss that later in the series). Although HTML has no element to mark up the first line of a block level element, CSS gives you this ability through the browser implementation -- that's why we call it a pseudo element. The syntax for pseudo elements (this is the CSS 3 Specifications' new syntax for pseudo elements) is to precede the name of the pseudo element with two colons (::), so we write it as ::first-line.

CSS 1 and CSS 2 Specifications use one colon (:) instead of two colons, so we can write it as :first-line. Actually, the CSS 3 Specifications use the two colon syntax to differentiate between pseudo elements (which now use two colons) and pseudo classes (which use only one colon). We will discuss pseudo classes in the next article.

Some older browsers that have not yet implemented any of the parts of the CSS 3 Specifications will not understand the two colon syntax; for them, you must use the old one colon syntax. Mozilla and IE 5.5 and 6 understand the new syntax. The ::first-line pseudo element is supported in Mozilla 1.7, IE 5.5 and 6, and Opera 7.5.

You have two options as to how to use the ::first-line pseudo element. The first is to use it with specific element selectors, such as div::first-line, which will apply the styling rules on the first line of every <div> element only (but not other block level elements). Otherwise, you can apply the styling rules to the first line of all the block level elements as ::first-line. So let's take a look at our first example in this article.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <link rel="stylesheet" href="PElements.css" type="text/css">
    <title>CSS Pseudo Elements</title>
  </head>
  <body>
    <p>In other words, the CSS Working Group doesn't implement the
specifications but it just produce a standard specifications so when
Microsoft implements its Internet Explorer it decides which parts of
the specifications it will implement.</p>
    <span> In other words, the CSS Working Group doesn't implement the specifications but it just produce a standard specifications so when Mozilla implements its Mozilla Explorer it decides which parts of the specifications it will implement</span>
    <br/>
    <br/>
    <div>When the Specifications are complete (which means that the
Specifications have been reviewed) it becomes Recommendation and this is a perfect expression, Recommendations, because as we have said that the W3C Consortium has no control over the various implementations of the Specifications it produces.</div>
  </body>
</html>
 

In the above HTML code, we have a <p> element, a <span> element (and two <br> elements to make some room) and a <div> element. Save this code in a file with the extension .html, and the following CSS code into the PElements.css file:

::first-line
{
  background-color: tan;
  color: yellow;
  font-size: 1.1em;
  font-family: Arial;
}

In the CSS code we state that we want the first line of all the block level elements to have a background color of tan and a text color of yellow, with a font-size of 1.1em and a font-family of Arial. Open the Web page and you will find that the first line of the <p> element and the <div> element has been styled, but the first line of the <span> element has not been styled because it's not a block level element.

The interesting point here is that the first line of text can be affected by many factors like resizing the browser window. When you resize the browser window, the number of the words in the first line will be changed, so a greater or lesser number of words will be styled. For example, try to decrease the width of the window and see what will happen:

As you can see, the first line has only seven words which have been styled, but in the first window the line had 10 words. There's another important thing that you need to know about pseudo elements: you can't use all the CSS Properties with them. I don't want to get into this now because we haven't discussed many CSS properties yet. For now, just remember that with the ::first-line pseudo element you can use color properties, background properties, font properties and some other properties that we didn't discuss yet such as letter-spacing, word-spacing, clear, text-shadow, line-height, text- transform, vertical-align and text-decoration. Don't worry, we will discuss each of these properties in the series.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials