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.
<html>
<head>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
style>
head>
<body>
<p class="highlight">This text is highlighted.p>
<p>This text is not highlighted.p>
body>
html>
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.
<html>
<head>
<style>
.box.round {
border-radius: 10px;
border: 2px solid black;
}
style>
head>
<body>
<div class="box round">This is a rounded box.div>
<div class="box">This box is not rounded.div>
body>
html>
3. Chaining Class Selectors with Other Selectors
You can combine class selectors with element or pseudo-class selectors for more specific targeting.
<html>
<head>
<style>
p.important {
color: red;
font-size: 18px;
}
style>
head>
<body>
<p class="important">This is an important paragraph.p>
<p>This paragraph is not styled.p>
body>
html>
4. Global Class Application
The universal selector with a class allows you to target all elements with the specified class.
<html>
<head>
<style>
*.notice {
color: blue;
font-style: italic;
}
style>
head>
<body>
<h1 class="notice">Notice this heading.h1>
<p class="notice">This is a noticed paragraph.p>
body>
html>
5. Combining Multiple Class Names
An element can have multiple class names, and each class's styles will combine.
<html>
<head>
<style>
.text-bold {
font-weight: bold;
}
.text-italic {
font-style: italic;
}
style>
head>
<body>
<p class="text-bold text-italic">This text is bold and italic.p>
body>
html>
6. Targeting Nested Elements with Class Selectors
You can apply styles to elements within a parent class using descendant selectors.
<html>
<head>
<style>
.container p {
color: green;
}
style>
head>
<body>
<div class="container">
<p>This paragraph is inside a container.p>
div>
<p>This paragraph is outside the container.p>
body>
html>
7. Overriding Class Styles
Use multiple classes on an element to override specific styles defined in earlier classes.
<html>
<head>
<style>
.button {
padding: 10px;
background-color: gray;
}
.primary {
background-color: blue;
color: white;
}
style>
head>
<body>
<button class="button primary">Primary Buttonbutton>
body>
html>
8. Using Class Selectors with Media Queries
Class selectors can be used within media queries to make styles responsive.
<html>
<head>
<style>
.responsive {
font-size: 16px;
}
@media (max-width: 600px) {
.responsive {
font-size: 12px;
}
}
style>
head>
<body>
<p class="responsive">Resize the browser window to see the text size change.p>
body>
html>