Learn CSS, part 7: Pseudo Elements
(Page 1 of 6 )
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.
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.
Next: Using the ::first-line Pseudo Element >>
More Style Sheets Articles
More By Michael Youssef
/ 17 
