CSS3 Pseudo-Elements
CSS3 Basics - Part 18
Forward: In this part of the series, we look at CSS3 Pseudo-Elements.
By: Chrysanthus Date Published: 23 Jul 2012
Introduction
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.
In this part of the series, we look at CSS3 Pseudo-Elements.
Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.
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.
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 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.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p:first-line {background-color: LightSkyBlue}
</style>
</head>
<body>
<p>
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
</p>
</body>
</html>
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 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:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p:first-letter {font-size:200%; float:left}
</style>
</head>
<body>
<p>
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
</p>
</body>
</html>
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
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT