Class Selector(“.”)
The class selector targets HTML elements based on their class attribute. Multiple elements can share the same class, making this selector useful for applying common styles to multiple elements.
Syntax
.element_class_name{
// CSS properties
}
Example: In this code, we will use only class selector to set the style to the HTML elements.
<!DOCTYPE html>
<html>
<head>
<title>CSS class Selector</title>
<style>
.container {
width: 400px;
height: 150px;
border: 2px solid black;
text-align: center;
}
.geeks {
color: green;
}
.selector {
font-family: Courier New;
}
</style>
</head>
<body>
<div class="container">
<h1 class="geeks">w3wiki</h1>
<h4 id="gfg">A Computer Science portal for Geeks</h4>
<b class="selector">CSS Selector class(.)</b>
</div>
</body>
</html>
Output:
Difference between “.” and “#” selector in CSS
CSS selectors are used to apply styles to HTML elements. The dot (.) selector targets elements by class, while the hash (#) selector targets elements by id. Classes can be shared by multiple elements, but an ID is unique within a page, ensuring specific element targeting.
Table of Content
- Id selector(“#”)
- Class Selector(“.”)
- Difference between class (“.”) and id (“#”) Selectors