CSS Class Selector
The class selector in CSS allows you to select an element (or multiple elements) based on a specific class attribute. It selects elements whose class attribute’s value matches with the specifying in the class selector.
For example, the class selector .side { color: green; } will apply the same style to all elements whose class attribute’s value is “side”.
The class selector is useful in CSS when you want to apply consistent styling across various elements on the webpage or to style certain elements differently from related elements without affecting the other elements.
For example, if you want to add padding to one paragraph element without affecting other paragraph elements, you can use the class selector with that paragraph.
Syntax to Define a CSS Class Selector
To select elements with a specific class attribute in the HTML document, you first need to create the CSS class selector in the style sheet and then apply to HTML elements using the class attribute.
To create a class selector, you begin with a period (.) character, followed by the classname and then write the style rule within the opening and closing braces.
The general syntax for defining a class selector in a style sheet is a simple and straightforward:
.classname {
property1: value1;
property2: value2;
/* More properties and values */
}In the above syntax, the period (.) indicates that you are defining a class selector. The classname specifies the name of the class you want to select. It is basically the value of class attribute that cannot begin with a number. The class name must be consist of letters, numbers, and hyphens only, to offer the best compatibility with older web browsers. It cannot include spaces.
In HTML, you apply this class selector to an HTML element using class attribute like this:
<div class="classname">Content goes here</div>
Remember that you do not need to put the dot in the class attribute value. In fact, it cannot happen because the value of the class attribute refers to the class name itself.
Let’s take an example in which we will define a classname selector and then apply it to an HTML element.
Example 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of Creating CSS Class Selector</title>
<style>
/* Creating a class selector */
.para {
color: white;
background-color: red;
padding: 20px;
border: 2px solid black;
}
</style>
</head>
<body>
<!--Applying class selector to an HTML element p-->
<p class="para">This is a paragraph whose background color is red and text color is white.</p>
</body>
</html>
In this example, we have defined a class name selector “.para” inside the style sheet that begins with a dot, followed by the class name “para” itself. Then, we have applied this class name selector to style an HTML element <p> using class attribute value “para”.
Styling Specific Element with Specific Class Name
In CSS, you can use the class selector to target a specific element on a web page that has a specific class attribute value. It is useful when we want to apply styles to a specific element without affecting other elements on the page that may have different class names.
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>Applying Style Rule to a Specific Element</title>
<style>
/* Applying style rule to a specific element p whose class attribute value is text2. */
.text2 {
color: white;
background-color: green;
border: 1px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<div class="text1">This is a box</div>
<p class="text2">This is a paragraph</p>
<span class="text3">This is a span</span>
</body>
</html>
In this example, .text2 { } is a selector that targets <p> element whose class attribute has a value of text2. You can also create selector to target the p element like this:
p.text2 {
color: white;
background-color: green;
border: 1px solid blue;
padding: 10px;
}Applying Multiple CSS Classes to HTML Element
In CSS, we can apply multiple classes to an HTML element by separating them with a space. Let’s understand this concept with an example.
Example 3:
<!DOCTYPE html>
<html>
<head>
<title>Multiple Class Selectors Example</title>
<style>
/* Creating multiple class selectors */
.class1 {
color: white;
background-color: red;
}
.class2 {
border: 2px solid black;
}
.class3 {
padding: 20px;
}
</style>
</head>
<body>
<!--Applying multiple class selectors to an HTML element div -->
<div class="class1 class2 class3">This div element is styled with three class selectors.</div>
</body>
</html>
As you can see in the above example code, we have assigned three class names to the class attribute inside the opening tag of <div> element. For example, class=”class1 class2 class3″. The value of this class attribute actually contains three class names: class1, class2, and class3.
We have separated each class name by a space in the attribute. In the style sheet, the three classes contain three separate style rules, which have been applied to an HTML div element, as illustrated in the above example code.
Applying CSS Class Selector to Different Types of Elements
CSS also allows you to apply the same class to different types of elements. In this case, the type of element doesn’t matter. Let’s understand it with the help of an example.
Example 4:
<!DOCTYPE html>
<html>
<head>
<title>Applying Same Class Selector to Different Elements</title>
<style>
/* Creating class selectors */
.class1 {
color: white;
background-color: green;
border: 2px solid black;
padding: 20px;
margin: 10px;
display: block;
}
</style>
</head>
<body>
<!--Applying same CSS class selector to different types of HTML elements -->
<div class="class1">This is a div styled with class1 selector.</div>
<p class="class1">This is a paragraph styled with class1 selector.</p>
<span class="class1">This is a span element that is styled with class1 selector.</span>
</body>
</html>
Output:
As you can see in this example code, we have applied the same class to different types of elements such div, p, and span. Here, by default, div and p are block-level elements which respect margin value more naturally.
However, span is an inline element, which does not respect margin value in the same way as block-level elements. To apply the margin value consistently across all elements, we have set the display property to block for the span element within the class.
Example 5:
<!DOCTYPE html>
<html>
<head>
<title>Applying Class Selectors to different Elements</title>
<style>
.class1 {
color: white;
}
.class2 {
font-size: 25px;
}
.class3 {
background-color: green;
}
}
</style>
</head>
<body>
<!--Applying same CSS class selector to different types of HTML elements -->
<div class="class1 class2">This div has white text and a font size of 25px.</div>
<p class="class1 class3">This paragraph has white text and a green background.</p>
<span class="class2 class3">This span has a font size of 25px and a green background.</span>
</body>
</html>
In this example, the <div> element is styled with two class selectors such as class1 and class2, making the text white and setting the font size to 25px. The <p> (paragraph) element is styled with two class selectors such as class1 and class3, making the text white and the background green. The <span> element is styled with two classes such as class2 and class3, setting the font size to 25px and the background to green.
Nested Classes in CSS
A nested class selector in CSS is a selector that is a combination of two or more class names to target elements that belong to both classes. This allows to target specific elements that have multiple classes applied to them.
Look at the below a simple example code of nested class selectors in CSS:
Example 6:
<!DOCTYPE html>
<html>
<head>
<title>Nested Classes Example</title>
<style>
/* Parent class */
.parent {
background-color: lightgrey;
padding: 20px;
}
/* Nested class */
.parent .child {
color: white;
background-color: blue;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<!-- Parent element with nested child elements -->
<div class="parent">
This is the parent div.
<div class="child">This is a child div within the parent.</div>
<div class="child">This is another child div within the parent.</div>
</div>
</body>
</html>In this example, we have created two class selectors: .parent and .parent .child. The first selector will apply the style rules for an element that have class attribute with value parent.
The second selector .parent .child applies styles to any element with class attribute value child that is a descendant of an element with the class attribute value parent.
Note: There is a space between .class1 and .class2 in the CSS selector which denotes a descendant relationship. The space between .parent and .child is important because it specifies that child is a nested element within parent.
If you do not provide the space, .parent.child will target elements that have both parent and child classes applied to them simultaneously, which is different from targeting child elements within parent elements.
Pseudo-Classes with CSS Class
CSS allows us to combine Pseudo-classes with classes to apply styles under specific conditions such as when:
- an element is hovered over.
- a link is visited.
- an input field is focused.
The basic syntax for a pseudo-class combined with a class looks like this:
.classname:pseudo-class {
/* styles */
}Let’s take some important examples based on it.
Example 7:
<!DOCTYPE html>
<html>
<head>
<title>Hover Example</title>
<style>
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.button:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<button class="button">Hover over me</button>
</body>
</html>
In this example, we have combined class selector button with the :hover pseudo-class. The :hover pseudo-class applies styles when the user hovers over an element. When the button element with the class button is hovered over, its background color changes from blue to dark blue.
Example 8:
<!DOCTYPE html>
<html>
<head>
<title>Focus Example</title>
<style>
.input-field {
padding: 10px;
border: 2px solid grey;
}
.input-field:focus {
border-color: blue;
outline: none;
}
</style>
</head>
<body>
<input type="text" class="input-field" placeholder="Focus on me">
</body>
</html>
In this example, we have combined CSS class selector .input-field with the :focus pseudo-class. The :focus pseudo-class applies styles when an user clicks on the element, such as an input field.
Example 9:
<!DOCTYPE html>
<html>
<head>
<title>Nth-Child Example</title>
<style>
.list-item {
padding: 10px;
background-color: lightgrey;
}
.list-item:nth-child(odd) {
background-color: grey;
}
.list-item:nth-child(even) {
background-color: white;
}
</style>
</head>
<body>
<ul>
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
<li class="list-item">Item 4</li>
<li class="list-item">Item 5</li>
</ul>
</body>
</html>
In this example, we have combined the class selector .list-item with the :nth-child pseudo-class. The :nth-child pseudo-class will apply the styles on the elements based on their position within a parent element. The list items with the class list-item will style differently based on whether they are in an odd or even position within their parent ul element.
Example 10:
<!DOCTYPE html>
<html>
<head>
<title>Link Example</title>
<style>
.link {
color: blue;
text-decoration: none;
}
.link:visited {
color: purple;
}
.link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://www.scientecheasy.com" class="link">Visit Scientech Easy for Latest Tutorials</a>
</body>
</html>
In this example, we have combined CSS class selector .link with :visited and :link pseudo-classes. The :visited and :link pseudo-classes apply styles to links based on their visited state.
Example 11:
<!DOCTYPE html>
<html>
<head>
<title>Disabled Example</title>
<style>
.input-field {
padding: 10px;
border: 2px solid grey;
}
.input-field:disabled {
background-color: lightgrey;
border-color: darkgrey;
}
</style>
</head>
<body>
<input type="text" class="input-field" value="Can't edit me" disabled>
</body>
</html>
In this tutorial, you learned about CSS class selector that can be reused across multiple elements to apply the same styles at once. I hope that you will have understood the basic syntax to create class selector and practiced all examples.
