Elements Selection
The class
is a general identification for one or more elements.
It is not necessarily to be unique in a document. Same class name can be used for other elements.
A class
is used to apply style or script on the element.
The class
is a single name with no space and started with letter, and is case sensitive.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<!-- Example: class Tag -->
<head>
<title>class Attribute Example</title>
<style>
.c1{
color: white;
background-color:#404040;
padding:20px;
font-size: 20pt;
border-radius: 5px;
}
</style>
</head>
<body>
<p>class Attribute in CSS</p>
<p class="c1">Hello w3context.</p>
<p class="c1">Hello World!</p>
</body>
</html>
Click on the "See output" button to see how it works.
Example
<!DOCTYPE html>
<html>
<!-- Example: class Tag -->
<head>
<title>class Attribute Example</title>
<script>
function m1() {
var e = document.getElementsByClassName("c1");
e[0].style.color = "white";
e[0].style.backgroundColor = "#404040";
e[0].style.padding = "20px";
e[0].style.fontSize = "20pt";
e[0].style.borderRadius = "5px";
}
</script>
</head>
<body onload="m1();">
<p>class Attribute in JavaScript</p>
<p class="c1">Hello w3context.</p>
<p class="c2">Hello World!</p>
<p class="c3">Hello HTML!</p>
</body>
</html>
Click on the "See output" button to see how it works.
Example
<!DOCTYPE html>
<html>
<!-- Example: class Tag -->
<head>
<title>class Attribute Example</title>
<script>
function m1() {
var e = document.getElementsByClassName("c1");
for(var i=0;i<e.length;i++){
e[i].style.color = "white";
e[i].style.backgroundColor = "#404040";
e[i].style.padding = "20px";
e[i].style.fontSize = "20pt";
e[i].style.borderRadius = "5px";
}
}
</script>
</head>
<body onload="m1();">
<p>class Attribute in JavaScript</p>
<p class="c1">Hello w3context.</p>
<p class="c1">Hello World!</p>
<p class="c2">Hello HTML!</p>
</body>
</html>
Click on the "See output" button to see how it works.
Example
<!DOCTYPE html>
<html>
<!-- Example: class Tag -->
<head>
<title>class Attribute Example</title>
<script>
function m1() {
var e = document.querySelectorAll(".c1,.c2");
for(var i=0;i<e.length;i++){
e[i].style.color = "white";
e[i].style.backgroundColor = "#404040";
e[i].style.padding = "20px";
e[i].style.fontSize = "20pt";
e[i].style.borderRadius = "5px";
}
}
</script>
</head>
<body onload="m1();">
<p>class Attribute in JavaScript</p>
<p class="c1">Hello w3context.</p>
<p class="c1">Hello World!</p>
<p class="c2">Hello HTML!</p>
</body>
</html>
Click on the "See output" button to see how it works.