CSS - Pseudo Classes

CSS Pseudo Classes

CSS - Pseudo Classes

In this module, we have discussed the following topics:

The various classification properties provided by CSS

The syntax and usage of the various classification properties with examples

CSS pseudo-class is a keyword which can be applied to selectors. Pseudo-classes specifies the state of the element to be selected. There are many variants of pseudo-classes.

Syntax:

Syntax

selector: pseudo-class;

Pseudo-elements are similar to pseudo-classes. Pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document.

Link related pseudo-classes: We can style our links based on their state using pseudo-classes.

pseudo-class	Description
:link	It is used to style the links which are not visited.
:visited	The state of the link when the link is viewed at least once.
:hover	The state of the link when the mouse is placed over the link.
:active	The state of the link when you click on the link :active styling statement must be placed after :hover styling statement.

Link Related Pseudo Classes

Let us see the usage of link related pseudo-classes in the below example.

Input Related Pseudo Classes :

Input related pseudo-classes: We can style the input fields based on their state.

pseudoclass	Description
:focus	The state of the element that is currently targeted by keyboard or activated by mouse
:enabled	The state enabled is associated with input fields, text area, and dropdowns. By default, all the input elements will be enabled
:disabled	The state of the element is disabled when they are disabled using the HTML attribute disabled
:checked	The state of the element when they are selected. The checked state is associated with input elements and radio buttons
:indeterminate	The third state of checkbox apart from checked and unchecked.
:required	Represents the input element with the required attribute set.

Let us see the usage of input related pseudo-classes in the below example.

Demo :

CODE/PROGRAM/EXAMPLE

<!doctype html>
<html>
<head>
    <title>Home Page</title>
    <meta charset="UTF-8"> 
</head>
<body>
    <table border="1" align="center">
        <tr>
            <td width="800px" height="100px">
                <h2>Global Bank</h2>
            </td>
        </tr>
    </table>
    <table border="1" align="center" bordercolor="#8598CC">
        <tr>
            <td width="600px">
                <section>
                    <h3>Welcome to Global Bank Success Page !</h3><br />
                    <p><em>Global Bank</em> is a international bank which has branches in various cities 
                    of various country.</p>
                    <br /><br /><br /><br />
                </section>
                <div align="center">Hello User!
                    <p>Your Account Creation Was Successful!<p>
                    <p> Thanks for opening an account with our bank. Please login to continue.<p><br />
                </div>
                <p align="center"><a href="home2.html">Login</a> </p>
            </td>
        </tr>
    </table>
    <table border="1" align="center">
        <tr>
            <td width="800px" height="30px">
                <footer>
                    <h2>&copy; Global Bank</h2>
                </footer>
            </td>
        </tr>
    </table>
</body>
</html>

body{background-color:lightgrey;}

#CSS_Position_Based_Pseudo_Classes #pseudo_class #pseudo_class #css_pseudo_classes #css_pseudo #html_pseudo_class #css3_pseudo_classes #pseudo_class_selectors #pseudo_classes_and_pseudo_elements #Pseudo_Classes_example

(New page will open, for Comment)

Not yet commented...