HTML class Attribute

#html #class #attribute

😄 This post is based on the content from coding.courses.

Definition and Usage

The class attribute specifies one or more class names for an element.
Multiple elements can share the same class names, which are used by CSS and JavaScript to classify, identify, select, style, and manipulate elements.

Basic Example

<p class="alert">This is an announcement.</p>
<p class="alert caution">Proceed with caution.</p>

Practical Uses

To specify multiple class names for a single element, separate the class names with spaces in the value of the class attribute.

<p class="alert caution">Proceed with caution.</p>

In addition, multiple elements can share the same class names.

The class attribute is used for the following purposes.

In CSS, class names are used as selectors to classify, identify, select, style, and manipulate elements.
Like CSS, in JavaScript, class names are also used to classify, identify, select, style, and manipulate elements.

#Using Class in CSS

---- HTML ----
<p class="alert">This is an announcement.</p>
<p>Paragraph element.</p>
<p class="alert caution">Proceed with caution.</p>
<p>Paragraph element.</p>

---- CSS ----
.alert { /* Selects the alert class: .class selector */
    padding: 0.5em;
    background-color: gold;
}
.caution { /* Selects the caution class: .class selector */
    color: orangered;
}

The CSS .alert selector targets and styles elements whose class name is alert. In addition, the CSS .caution selector targets and styles elements whose class name is caution.

The <p class="alert caution">Proceed with caution. </p> element has two class names: alert and caution.
Because this element matches both the .alert and .caution selectors, the styles defined by both selectors are applied.

# Using Class in JavaScript

The following example contains ten <div> elements. Seven of those <div> elements have the class name box.

When the button is clicked, JavaScript identifies only the elements with the class name box and changes their text from "box class" to "Hello from the box class."

HTML
<style>
    div { /* Styles all div elements */
        padding: 0.5em;
        border: 1px solid red;
        margin-bottom: 0.5em;
    }
    .box { /* Adds a background color only to div elements with the box class */
        background-color: gold;
    }
</style>

<div class="box">box class</div>
<div class="box">box class</div>
<div class="box">box class</div>
<div class="box">box class</div>
<div>div</div>
<div>div</div>
<div class="box">box class</div>
<div class="box">box class</div>
<div>div</div>
<div class="box">box class</div>
<button id="highlight-button" type="button">Click to Change Text</button>

<script>
    const highlightButton = document.getElementById("highlight-button");

    highlightButton.addEventListener("click", () => {
        // document.querySelectorAll(".box") : Selects all elements with the class name "box"
        const boxes = document.querySelectorAll(".box");

        boxes.forEach(box => {
            box.innerHTML = "Hello from the box class.";
        });
    });
</script>

As shown in this example, JavaScript uses class names to identify, select, style, and manipulate elements.

References