CSS Pseudo Class and Element Basics

CSS Basics – Part 11

CSS Course

Foreword: In this part of the series, I give you the basics of pseudo classes and pseudo elements in CSS.

By: Chrysanthus Date Published: 15 Dec 2015

Introduction

This is part 11 of my series, CSS Basics. In this part of the series, I give you the basics of pseudo classes and pseudo elements in CSS. You should have read the previous parts of the series before reaching here, as this is a continuation.

Class
Consider the following rule:

    p.special {background-color:lime;color:red}

This rule applies to all paragraph elements on the page. If you want only certain paragraph elements to have the rule, then you need to specify the group of elements with a class. You give the class a name (of your choice). Assume that you have given the name, special; then the rule will be rewritten as:

    p.special {background-color:lime;color:red}

Note the use of the dot between p and special. Any HTML element can have the attribute called, class. In the HTML code, any p element whose class attribute has the value, special, will implement the rule. Read and try the following code:

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        p.special {background-color:lime;color:red}
    </style>
</head>
<body>
    <p>
        The first paragraph.
    </p>
    <p class="special">
        The second paragraph.
    </p>
    <p class="special">
        The third paragraph.
    </p>
</body>
</html>

The second and third paragraphs are of the class, special and they have the background and foreground colors. The first paragraph does not belong to the class and so does not have the background and foreground colors of the second and third paragraphs.

Pseudo Classes
The word, pseudo means pretended. A class (group of same HTML elements) like the above is a real class; the elements in the group are in their normal state. CSS has a set of pseudo (pretended) predefined classes. Such a class applies to a group of same HTML elements, when they are not in their normal state. The style rule syntax to use a pseudo class is:

    element:pseudoClassName

Note the use of the colon. A pseudo class style rule uses the colon and not the dot. We look at some of the classes below:

The Link Pseudo-Classes
There are two link pseudo classes (groups), which are “:link” and “:visited”. The link pseudo-classes apply to the a elements. When a user is using a web page, there are some a elements that he would click, and there are others that he would not click. During the session, he might want to know the a elements that he has clicked and those that he has not clicked. There are two link pseudo classes to make this distinction. These are the :link and :visited classes. The a links that have not been visited (clicked) are of the “:link” class. Those that have been visited are of the “:visited” class.

Example of Link Pseudo-Classes
You code the two Link Pseudo classes as follows:

        a:link {color: red}
        a:visited {color: purple}

You start with the tag name of the a element, a, followed by either the “:link” or “:visited” class. For this case, the links that have not been visited have the red color, while those that have been visited have the purple color. You can give whatever presentation you want in any of the declaration blocks.

The User Action Pseudo-Classes
The user action pseudo-classes apply to any set of elements. There are three user action pseudo-classes: the “:hover”, “:active”, and “:focus” class. Each class can be applied to all HTML buttons, or all a links or all images, etc.

The :hover Class
Assume you have a web page that has buttons, and all the buttons are of the hover class. As the user is viewing the web page, if the mouse pointer goes over a button, that button will have a special presentation. When the mouse pointer is out of the button the button looses that presentation. The special presentation is what is in the declaration block of the hover class. The following code illustrates this. Try the code and move the mouse pointer over each button in turn.

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        button:hover {background-color:lightblue}
    </style>
</head>
<body>
    <button type="button">Click Here 1</button><br />
    <button type="button">Click Here 2</button><br />
    <button type="button">Click Here 3</button><br />
</body>
</html>

If you tried the code, you would have noticed that when the mouse pointer is over a button, the background color of the button is light-blue. The CSS rule for this is:

        button:hover {background-color:lightblue}

The :hover class becomes effective, if you attached its name to the tag name of an HTML element, as for the button elements above. The content of the declaration block gives you the special presentation.

The :active Class
This is applicable to any set of elements. Assume that you are viewing a web page and you click an A link for another page to appear. It would take some time before the other page appears. While you are waiting for the new page, the A link is said to be active. After this, when you are seeing the new page, the A link would be in its visited phase, no longer in the active phase. You implement the pseudo active class as the following line illustrates:

        a:active {background-color:green}

The :active class becomes effective, if you attached its name to the name of an HTML element as in the A element above. The content of the declaration block gives you the special presentation.

The :focus Class
Each browser has its way of indicating to the user the element that has focus. If you are viewing a web page and you press the tab key on the keyboard repeatedly, slowly, the browser will be moving the focus from one element to the other, indicating to you the element that has focus by a slight modification of its normal presentation. Usually this modification of presentation is not conspicuous. If you want the indication to be conspicuous, you have to use the :focus pseudo class, as the following line illustrates.

        button:focus {background-color:lightgray}

The :focus class like all the other classes becomes effective, if you attached its name to the tag name of an HTML element as in the button element above. The content of the declaration block gives you the special presentation.

The a Link Element
Many web pages use the :link, :visited, :hover and :active pseudo classes for the a link element. You need something like this:

a:link    {color:red; text-decoration: none}    /* unvisited links */
a:visited {color:blue; text-decoration: underline}   /* visited links   */
a:hover   {color:yellow; text-decoration: underline} /* user hovers     */
a:active  {color:lime; text-decoration: underline}   /* active links    */

The classes should appear in the above order; that is, the :link first, then :visited, then :hover and finally :active.

Pseudo Elements
Pseudo means pretended. HTML elements are real elements. There are certain HTML features, which CSS pretends that they are elements and would give them presentations. For example, the first line of a paragraph is not an element. However, CSS can pretend that it is an element and give it presentation (style rule).

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.

<!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
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>

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.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

CSS Pseudo Class and Element Basics

CSS Basics – Part 11

CSS Course

Introduction

Related Links

Comments