CSS Class Selector
CSS class selectors are one of the most versatile tools in your front-end development toolkit. They allow you to apply styles to multiple elements on a webpage, ensuring your design remains consistent and easily maintainable.
Syntax
.class-name{
property: value;
}
1. Basic class selector
The basic class selector applies styles to all elements with a specified class name. Use a period (.) before the class name in the CSS.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p class="highlight">This text is highlighted.</p>
<p>This text is not highlighted.</p>
</body>
</html>
<!--Driver Code Ends-->
2. Multiple Class Selectors
Multiple class selectors apply styles only to elements that have all the specified classes. Separate the class names with a dot.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.box.round {
border-radius: 10px;
border: 2px solid black;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="box round">This is a rounded box.</div>
<div class="box">This box is not rounded.</div>
</body>
</html>
<!--Driver Code Ends-->
3. Chaining Class Selectors with Other Selectors
You can combine class selectors with element or pseudo-class selectors for more specific targeting.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p.important {
color: red;
font-size: 18px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p class="important">This is an important paragraph.</p>
<p>This paragraph is not styled.</p>
</body>
</html>
<!--Driver Code Ends-->
4. Global Class Application
The universal selector with a class allows you to target all elements with the specified class.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
*.notice {
color: blue;
font-style: italic;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1 class="notice">Notice this heading.</h1>
<p class="notice">This is a noticed paragraph.</p>
</body>
</html>
<!--Driver Code Ends-->
5. Combining Multiple Class Names
An element can have multiple class names, and each class's styles will combine.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.text-bold {
font-weight: bold;
}
.text-italic {
font-style: italic;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p class="text-bold text-italic">This text is bold and italic.</p>
</body>
</html>
<!--Driver Code Ends-->
6. Targeting Nested Elements with Class Selectors
You can apply styles to elements within a parent class using descendant selectors.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.container p {
color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="container">
<p>This paragraph is inside a container.</p>
</div>
<p>This paragraph is outside the container.</p>
</body>
</html>
<!--Driver Code Ends-->
7. Overriding Class Styles
Use multiple classes on an element to override specific styles defined in earlier classes.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.button {
padding: 10px;
background-color: gray;
}
.primary {
background-color: blue;
color: white;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<button class="button primary">Primary Button</button>
</body>
</html>
<!--Driver Code Ends-->
8. Using Class Selectors with Media Queries
Class selectors can be used within media queries to make styles responsive.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.responsive {
font-size: 16px;
}
@media (max-width: 600px) {
.responsive {
font-size: 12px;
}
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p class="responsive">Resize the browser window to see the text size change.</p>
</body>
</html>
<!--Driver Code Ends-->
