Pseudo-Elements

Introduction
This is part 12 of my series, Basics of CSS2. CSS gives presentation to HTML elements. The Inventors of CSS realized that not all HTML (XHTML) elements had been established. You have the Paragraph element, DIV element, TABLE element, etc. You do not have any HTML element that represents the first line of a containing element. You do not have any HTML element that represents the first letter in a containing. Examples of HTML containing elements are the Paragraph and the DIV elements.

The inventors of CSS realized this and at the level of CSS, they came up with an element for the first line of a containing element and an element for the first letter of a containing element. Since these elements do not exit in the HTML (XHTML) language, they are called Pseudo elements. These elements exist only in the CSS language.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

CSS Rule Revisited
Consider the following examples:

h1 {background-color: LightSkyBlue}
p {background-color: LightSkyBlue}
div {background-color: LightSkyBlue}

Each of the above rules will be found in the style sheet. Each of these rules begins with an HTML element tag name, followed by a declaration block. The declaration block is what actually gives presentation to the HTML element, which is quoted in front of it. The tag name of the HTML element and the declaration block are all in the style sheet forming the CSS Language component of the web page.

So CSS knows that in order to give presentation to an HTML element you need the declaration block for that. In your style sheet, you just precede the declaration block with the tag name of the HTML element. The inventors of CSS reasoned that, if you want to give presentation to an HTML element that does not exits in the HTML language, you can use a new name for the element at the style sheet, and then follow this name with a normal declaration block. And so they come up with the special name, ":first-line" and ":first-letter" for the first line of a containing element and the first character of a containing element, respectively.

That is not all; if you want to change the background color of the first line of a paragraph element, you will do this:

p:first-line {background-color: LightSkyBlue}

You can choose any color for the background. What I want you to know here is that the ":first-line" follows the Paragraph tag name and all of "p:first-line" is in the position of an HTML tag name of the style sheet.

If you want to change the background color of the first letter of a paragraph element, you will do this:

p:first-letter {background-color: LightSkyBlue}

You can choose any color for the background. What I want you to know here is that the ":first-letter" follows the Paragraph tag name and all of "p:first-letter" is in the position of an HTML tag name of the style sheet.

Everything being equal, an element should exist in the HTML language before being used in the CSS language. Since the effective elements, "p:first-line" and "p:first-letter" do not exist in the HTML language, they are called PSEUDO elements.

The :first-line Pseudo Element
The first-line pseudo element is formed when you attach ":first-line" to the tag name of a containing element as in the paragraph example above. The DIV first-line pseudo element is

div:first-line

Pseudo elements exist only in the style sheet (CSS) and not in HTML. Try the following code, for the paragraph element.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

p:first-line {background-color: LightSkyBlue}

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Warning: When you use the pseudo elements, browsers may not respect certain CSS properties for the rules they are in. If you replace the CSS rule above with the following, your browser might not give you the required width, but the syntax (typing) for the width property and value is correct:

p:first-line {background-color: LightSkyBlue; width:40%}

Browsers do not respect all the different possible combinations of the CSS properties. However, the newer the browser (version) the more property combinations it respects (implement).

The :first-letter Pseudo Element
The first-letter pseudo element is formed when you attach ":first-letter" to the tag name of a containing element as in the paragraph example above. The first-letter Pseudo element is the very first character of a containing element. The DIV first-letter pseudo element is,

div: first-letter

Pseudo elements exist only in the style sheet (CSS) and not in HTML. Try the following code, for the paragraph element:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

p:first-letter {font-size:200%; float:left}

Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

A new property has been used in the declaration block above. The property and its value are, "font-size:200%" We shall see the details of this later. For now, just know that it would make the element concerned to be two times it's size. The element concerned here is the very first letter of the paragraph.

Another thing to note in the declaration block above is the float property. After enlarging the first character, the float property makes the rest of the text to be around (on the sides) of the enlarged letter. This float property also makes sure the letter remains at the left end. The float property is usually used in this way, when you enlarge the very first letter of the containing element.

Conclusion
A Pseudo element refers to an element in the web page that does not exist in the HTML language, but was forced to be created in the CSS language. A CSS pseudo element gives a special presentation to HTML text or HTML element that is in a particular situation in the web page.

That is what we have for Pseudo elements. We stop here and continue in the next part of the series.

Chrys