In CSS, class selectors are used to target specific HTML elements based on their class attribute. Class selectors allow you to apply styles to multiple elements with the same class, providing a way to group and style related elements together.
In this tutorial, we will explore how to use class selectors effectively.
To use class selectors in CSS, you need to add the class attribute to HTML elements. The class attribute can have any name you choose, but it should not start with a dot (.) when defined in HTML. The dot (.) is used in CSS to select elements based on their class name.
Example
<!DOCTYPE html>
<html>
<head>
<title>Class Attribute Example</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 class="highlight">Hello, World!</h1>
<p>This is an example paragraph.</p>
<p class="highlight">This paragraph is highlighted.</p>
</body>
</html>
A basic class selector targets elements with a specific class name. It is represented by a dot (.) followed by the class name.
HTML
<p class="highlighted">This paragraph has a custom class attribute.</p>
.highlighted {
color: blue;
font-weight: bold;
}
In this example, the class selector .my-class targets the <p> element with the class "highlighted". It sets the text color to blue and the font weight to bold.
You can assign multiple class names to an element by separating them with spaces. A multiple class selector selects elements that have all the specified class names.
HTML
<p class="highlight important">This is an important paragraph.</p>
/*1. way*/
.highlight.important {
background-color: yellow;
font-weight: bold;
}
/*2. way*/
.important.highlight {
background-color: yellow;
font-weight: bold;
}
Here, the class selector .highlight.important targets the <p> element that has both the "highlight" and "important" classes. It applies a yellow background color and bold font weight.
You can also use multiple class selectors to target elements that have any of the specified classes. For example, the following selector will select all elements that have either the class "highlight" or the class "important"
HTML
<p class="highlight">This is an highlight paragraph.</p>
<p class="important">This is an important paragraph.</p>
.important, .highlight {
background-color: yellow;
font-weight: bold;
}
A descendant class selector targets elements that are descendants of a specific parent element with a class.
HTML
<div class="container">
<p>This is a paragraph inside a container.</p>
</div>
.container p {
color: red;
}
The class selector .container p selects the <p> element that is a descendant of an element with the "container" class. It sets the text color to red.
A child class selector targets elements that are direct children of a specific parent element with a class.
HTML
<div class="container">
<p>This is a paragraph inside a container.</p>
</div>
.container > p {
font-weight: bold;
}
In this example, the class selector .container > p selects the <p> element that is a direct child of an element with the "container" class. It applies a bold font weight.
This type of selector selects all elements, regardless of their type. For example, the following selector will select all elements, regardless of their type
HTML
<p class="my-class">This is a paragraph with the class "my-class".</p>
<span class="my-class">This is a span with the class "my-class".</span>
*.my-class {
color: red;
}
The adjacent sibling class selector in CSS allows you to select an element that immediately follows another element and both elements share the same parent. To use the adjacent sibling class selector, you can use the plus sign (+) between the class selectors.
HTML
<p class="highlight">This is a highlighted paragraph.</p>
<p class="highlight">This is another highlighted paragraph.</p>
<p>This is a regular paragraph.</p>
<p class="important">This is an important paragraph.</p>
<p class="important">This is another important paragraph.</p>
.highlight + .important {
color: red;
}
In this example, the CSS rule .highlight + .important targets the <p> element with the class "important" that immediately follows a <p> element with the class "highlight". The specified CSS property, in this case, is the font color set to red.
The general sibling class selector in CSS allows you to select elements that share the same parent and come after the selected element, regardless of their position or order. To use the general sibling class selector, you can use the tilde (~) symbol between the class selectors.
HTML
<p class="highlight">This is a highlighted paragraph.</p>
<p>This is a regular paragraph.</p>
<p class="important">This is an important paragraph.</p>
<p class="highlight">This is another highlighted paragraph.</p>
.highlight ~ .important {
color: red;
}
In this example, the CSS rule .highlight ~ .important targets all <p> elements with the class "important" that come after any <p> element with the class "highlight" within the same parent container. The specified CSS property, in this case, is the font color set to red.
You can manipulate elements using class selectors by adding or removing classes dynamically through JavaScript or applying styles conditionally.
HTML
<button onclick="changeColor()">Change Color</button>
<p class="color-change">This paragraph's color can be changed.</p>
.color-change {
color: blue;
}
.color-change.highlight {
color: red;
}
function changeColor() {
var paragraph = document.querySelector('.color-change');
paragraph.classList.toggle('highlight');
}
changeColor()
In this example, the class selector .color-change targets the <p> element with the "color-change" class and sets its initial color to blue. When the "Change Color" button is clicked, the JavaScript function changeColor() toggles the "highlight" class on the paragraph, which changes its color to red.