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.
Next: Using the ::first-letter Pseudo Element >>
More Style Sheets Articles
More By Michael Youssef
/ 17 
