In CSS (Cascading Style Sheets), a class selector is a way to target HTML elements that have a specific class assigned to them. It allows you to apply styles to multiple elements with the same class, providing a way to group and style related elements consistently. Class selectors are denoted by a period (.) followed by the class name.
Here’s an example of how you can use a class selector in CSS:
HTML: In the example above, the CSS class selector .my-class targets all the <div> elements with the class name “my-class” assigned to them. The styles defined in the CSS block will be applied to these elements, making the text color blue, bold, and adding a margin at the bottom of each element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Selector</title>
<style>
/* CSS code with a class selector */
.my-class {
color: blue;
/* Sets the text color to blue */
font-weight: bold;
/* Makes the text bold */
margin-bottom: 100px;
font-size: xx-large;
/* Adds a margin at the bottom of the element */
}
</style>
</head>
<body>
<!-- HTML code with elements that have a "my-class" class assigned -->
<div class="my-class">Element 1</div>
<div class="my-class">Element 2</div>
<div class="my-class">Element 3</div>
</body>
</html>
