As you know, a selector like h1 refers to all the <h1> elements in the markup document. You can directly apply any formatting styles to the <h1> elements with no problems. Sometimes, however, we need to apply certain formatting rules on parts of the document that can't be represented using HTML.
For example, maybe you need to apply a blue background and a text color of yellow to the first letter of a paragraph or a <Div> element, or maybe you want to change the font-size of the first line of each paragraph in your HTML file. There are no elements in the HTML that can do such things. In other words, there's neither a <firstletter> element nor a <firstline> element in HTML.
CSS gives us the ability to apply styling rules to certain parts of the document by using pseudo elements. Pseudo elements refer to parts of the document that you cannot directly access through the HTML-- but the browser can, through the Web designer PSEUDO. In other words, you don't have access to the first line of a paragraph using HTML elements, but CSS has a pseudo element to give you access to it and to let you apply your styling rules to it through the browser.
It's the browser's responsibility to get to these elements. We call them pseudo elements because they don't exist in the markup and we don't have direct control over them, as you will see in the code examples in this article. Let's begin.
Using the ::first-line Pseudo Element
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.
Using the ::first-letter Pseudo Element
The ::first-letter pseudo element applies your styling rules to the first letter of the first word of the first line in block level elements. A block level element is that element that occupies its parent element's complete area (we will talk about this later in the series). I think that by now you understand what it does, so let's take a look at an example. Add the following CSS code to the CSS file:
::first-letter
{
background-color: blue;
color: yellow;
font-size: 2em;
font-family: Tahoma;
}
This code will style the first letter of the first word of the first line in all the block level elements to have a blue background with yellow text as Tahoma 2 em. Reload the Web page to see the effect.
Okay, I know that some of you now may be saying "How does the ::first-letter override the styling rules of the ::first-line?" and some others would say "How do some selectors override the styles of other selectors?" I will answer these questions in the article covering inheritance and cascade, which is coming soon in the series. As you can see, only the block level elements (the <p> and <div> elements) have been styled. The <span> element has not been styled because it's an inline element.
With the ::first-letter pseudo element you can use color properties, background properties, padding properties, margin properties, border properties, clear, line-height, text-shadow, text-decoration, text-transform and float. These are discussed in the appropriate articles in the series. This pseudo element is supported in IE 5.5, 6 and Mozilla 1.7 and Opera 7.5
Using the ::selection Pseudo Element
The ::selection pseudo element is introduced in the CSS 3 Specifications (not CSS 2) and it isn't yet supported by major browsers such as Microsoft Internet Explorer. Safari 1.2 is the only browser that supports this pseudo element for now. Mozilla 1.7 supports the ::selection Pseudo Element as ::-moz-selection. Here, moz stands for Mozilla; we will talk about that in a minute.
This pseudo element applies the styling rules to the user's selected text. In other words, it applies the styles to the text that the user has highlighted using the mouse. Using this new pseudo element you can apply another background color and another text color, instead of the default highlighting style (which is dark blue for the background with white text). We can change these colors using the ::selection pseudo element, but notice that the CSS 3 Specifications stated that there are only four CSS properties that can be used with this pseudo element: outline, color, cursor and background-color.
I will use Mozilla 1.7 for this example, too, so I will use its CSS ::-moz-selection Pseudo Element. Add this code to the CSS file, then reload the page and highlight some text to see the effect:
::-moz-selection
{
background-color: red;
color: yellow;
}
As you can see, the selected text has been styled as yellow text with a red background.
So why does Mozilla use the name ::-moz-selection instead of ::selection? Well, the ::selection pseudo element is new to CSS. It has been introduced with the CSS 3 Specifications, which are under development and might be updated (because they're not ratified yet). Mozilla implements some of the CSS 3 properties and precedes it with the prefix -moz- (such as the pseudo element ::selection as ::-moz-selection) so we can see that this is a Mozilla implementation of the new CSS 3 properties, which are not supported by browsers yet. Actually they did so because any of the CSS 3 properties can be left out of the final specifications. Mozilla will remove the -moz- prefix for the properties that will be included in the final release of the CSS 3 Specifications.
The Content Property
The reason for including this section in this article is that the next two pseudo elements are dependent on this property. The content property is used in CSS to dynamically insert text from the CSS file into the Web page. This text is what we call generated content. This can be better explained with an example. Copy the following CSS code and save it as test.css:
div
{
content: "This is a Generated Content from the CSS file";
color: white;
background-color: black;
font-family: Tahoma;
font-size: 1.1em;
}
Now save the following HTML code to a file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css">
<title>CSS Pseudo Elements</title>
</head>
<body>
<div></div>
</body>
</html>
You need to open this page with Opera 7 in order to get the result, because it implements the content property in the way the CSS 3 Specifications state. Actually, in CSS 3 Specifications the content property can be used without the ::before and ::after pseudo elements, but in CSS 2 the specifications state that it must be used with ::before and ::after. Mozilla supports the content property as specified in CSS 2, so it must be used with the pseudo elements ::before and ::after.
Let's take it step by step. In the CSS file we have the div element selector, which applies the following rules to all of the div elements in the document. First, it will insert the character string data "This is a Generated Content from the CSS file" into all the <div> elements in the document. Second, it will set the text color to white and the background color to black. Finally, it will change the font-family to Tahoma and the size to 1.1em.
What's happening is that the browser inserts into the <div> elements the string value of the content property. Note that if there is some text inside the <div> element, it will be replaced with the string of the content's property value as in the following example. I just added another <div> element with some text inside and reloaded the Web page. As you can see, this text is never loaded; it's replaced with the string of the content's property value.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css">
<title>CSS Pseudo Elements</title>
</head>
<body>
<div></div>
<div>This is the div element's text</div>
</body>
</html>
The ::before and ::after Pseudo Elements
These pseudo elements give you the ability to insert text or images before (using ::before) the content of the element and after the content of the element (using ::after), through the use of the content property. They are very useful if you have some string values that are repeated in the HTML code a lot. Instead of sending them many times, increasing the size of the page and using more bandwidth, you can send these string values only once in the CSS file (because browsers will cache the CSS file). Use this in Web pages as much as you can, because doing so will save the page size -- but be careful to use generated content, because it has not yet been implemented by IE.
Let's look at an example. In the next CSS code we set the before and after content for any <p> element that has the class QandA (note the power of the combination of element selector, class selector and the pseudo element offered by CSS):
p.QandA
{
background-color: cyan;
color: red;
font-family: Arial;
}
p.QandA::before
{
content: "Question: ";
font-family: Arial;
font-size: 1.1em;
color: white;
background-color: blue;
}
p.QandA::after
{
content: " ?";
font-family: Arial;
font-size: 1.1em;
color: white;
background-color: blue;
}
And here's the HTML code:
<!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 class="QandA">Do you like CSS</p>
</body>
</html>
The ::before pseudo element has inserted the value of its content property BEFORE the content of the <p> element, and has applied the styling rules too. The same thing applies to the ::after pseudo element.
By Michael Youssef
Source: devarticles.com
