Class and Pseudo Class

HTML Class Attribute
The class attribute in HTML assigns one or more class names to elements so they can be styled with CSS or manipulated using JavaScript. It helps group elements for consistent design and behavior.

Used to apply CSS styles to multiple elements at once.
Allows JavaScript to select and manipulate elements.
Supports multiple class names in a single element.

Syntax
<tag class="classname"></tag>

Examples of HTML Class Attribute
Here is a basic example of an HTML Class Attribute:

1. Using the Same Class in Multiple HTML Tags
The HTML class attribute can be applied to various tags, allowing multiple elements to share a common classification. This enables consistent styling or functionality across different types of elements, enhancing design cohesion and simplifying maintenance.
Example: This example shows the use of the classes in HTML.

<!DOCTYPE html>
<html>

<head>
    <style>
        .country {
            background-color: black;
            color: white;
            padding: 8px;
        }
    </style>
</head>

<body>
    <h2 class="country">CHINA</h2>

    <p>
        China has the largest population
        in the world.
    </p>

    <h2 class="country">INDIA</h2>

    <p>
        India has the second largest
        population in the world.
    </p>

    <h2 class="country">UNITED STATES</h2>

    <p>
        United States has the third largest
        population in the world.
    </p>
</body>

</html>

In the above example each heading (<h2>) is assigned the class "country" using the class attribute.
The CSS selector .country targets multiple elements with the class "country" to apply styling.
Styling defined for the "country" class is applied uniformly to all headings tagged with it.
Using class attributes ensures consistent styling across headings, simplifying design management.

2. Using Multiple Classes on a Single Element
HTML allows an element to have multiple classes by separating class names with spaces. This enables a more modular and flexible approach to styling, where an element can share common styles but also have unique styles.

Example: In this example, we will use more than one class.

<!DOCTYPE html>
<html>

<head>
    <style>
        .country {
            color: white;
            padding: 10px;
        }

        .china {
            background-color: black;
        }

        .india {
            background-color: blue;
        }

        .usa {
            background-color: red;
        }

        center {
            padding: 20px;
        }
    </style>
</head>


<body>
    <center>
        <h2 class="country china">CHINA</h2>
        <h2 class="country india">INDIA</h2>
        <h2 class="country usa">UNITED STATES</h2>
    </center>
</body>

</html>

In the above example <h2> elements are assigned the "country" class for shared styling attributes.
Additional classes like "china", "india", and "usa" provide unique background colors.
Classes set background colors to black, blue, and red, with white text and padding for visual contrast.
The <center> tag ensures horizontal alignment of content, improving the presentation and readability of the page.

CSS Pseudo-classes
A pseudo-class is a keyword added to a CSS selector, prefixed by a colon (:), to define a specific state or condition of an element. It is used to style elements like a hovered button, the first child of a container, or checked input fields.
Syntax

selector:pseudo-class {
    /* styles */
}

Interactive/User Action Pseudo-Classes
1. :hover
This applies when the user hovers over an element.

<html>
<head>
    <style>
        button:hover {
            background-color: lightblue;
            color: white;
        }
    </style>
</head>
<body>
    <button>Hover over me!</button>
</body>
</html>

This will change the background color of the button when hovered over.

2. :focus
Applies when an element receives focus (e.g., a text input clicked)

<html>
<head>
    <style>
        input:focus {
            border: 2px solid blue;
            outline: none;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Click to focus">
</body>
</html>

This will change the border of the input field to blue when it is focused.

3. :active
Applies when an element is being clicked.

<html>
<head>
    <style>
        button:active {
            background-color: darkblue;
            color: white;
        }
    </style>
</head>
<body>
    <button>Click me!</button>
</body>
</html>

This will change the background color of the button when it is being clicked (in the active state).

4. :visited
Applies to links the user has visited.

<html>
<head>
    <style>
        a:visited {
            color: purple;
        }
    </style>
</head>
<body>
    <a href="https://www.example.com//">Visit this link</a>
</body>
</html>

This will change the color of visited links to purple.

5. :link
Applies to links that the user has not visited yet.

<html>
<head>
    <style>
        a:link {
            color: green;
        }
    </style>
</head>
<body>
    <a href="https://www.example.com//">Visit this link</a>
</body>
</html>

This will make unvisited links appear in green.

References:
https://www.geeksforgeeks.org/css/css-pseudo-classes/
https://www.w3schools.com/css/css_pseudo_classes.asp
https://www.geeksforgeeks.org/html/html-class-attribute/
https://www.w3schools.com/html/html_classes.asp
https://pwskills.com/blog/web-development/html-class
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes

推荐订阅源

DEV Community