Finding elements by using pseudo-classes

Using pseudo-classes

Pseudo-classes allow you to apply styles to an element based on its state, its interaction with the user, or its position in the document.

Using :link, :visited, and :hover pseudo-classes

These are the most commonly used pseudo-classes, used most frequently with the anchor element, providing a clickable link for the user of the webpage.

With these pseudo-classes, you can control what styles are applied to a hyperlink in the different states.

The following CSS changes the color of the link based on its state:

<head>
<style type="text/css">
    a:link {
        color: green;
        }
    a:hover {
        color: red;
        }
    a:visited {
        color: black;
        }
</style>
</head>
<body>
    <h3>pseudo-clases - (:link, :visited, and :hover)</h3>
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
    </ul>
</body>

Using :checked pseudo-classes

The :checked pseudo-class lets you apply styles to elements that are in a checked state. Elements that support this pseudo-class are check boxes and radio buttons.

The following example shows how to hide a check box when a user clicks it:

<head>
<style type="text/css">
    input[type="checkbox"]:checked {
        width: 30px;
        height: 30px;
        border: 1px solid #808080;
        }
</style>
</head>
<body>
    <h3>pseudo-classes - (:checked)</h3>
    <input type="checkbox" checked="checked" />PIZZA 4-STAGIONI <br />
    <input type="checkbox" /> PIZZA MARGERITA
    <input type="checkbox" /> PIZZA PROSCIUTTO CRUDO
</body>

Using :required pseudo-classes

The :required pseudo-class lets you apply styles to any elements on the page that have the required attribute. This is a convenient way to highlight required fields on a form.

The following CSS demonstrates applying styles to all required input controls:

<head>
<style type="text/css">
    input:required {
        border: 2px solid red;
        background-color:lightblue;
        }
</style>
</head>
<body>
    <h3>pseudo-classes - (:required)</h3>
    <form>
        <label for="name">Email</label>
        <input type="email" id="name" /><br />
        <!-- STYLE USING ATTRIBUTE SELECTOR (REQUIRED)-->
        <label for="paswword">Password</label>
        <input type="password" id="password" required />
        <br /><br />
        <input type="submit" value="Send" />
    </form>
</body>

Using :enabled and :disabled pseudo-classes

The :enabled and :disabled pseudo-classes allow you to style controls based on their enabled or disabled state. By default, disabled controls typically are light gray.

The following CSS demonstrates the :enabled and :disabled pseudo-classes:

<head>
<style type="text/css">
    input:disabled {
        background-color: lightblue;
        }
    input:enabled {
        background-color: yellow;
        }
</style>
</head>
<body>
    <form>
        <input type="button" value="Cancel" disabled="disabled"/>
        <input type="button" value="Send"/>
    </form>
</body>

Ads Right