Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to apply CSS style to the different elements having the same class name in HTML?
HTML classes are global attributes that are used by HTML tags to specify a list of classes that are case-sensitive in nature. These classes are then used by CSS to apply styling to that particular tag that has the class, and by JavaScript to manipulate the HTML element's behavior, interactivity, or styles.
Syntax
/* Select all elements with same class */
.classname {
property: value;
}
/* Select specific element type with class */
elementname.classname {
property: value;
}
Method 1: Using the Class Selector (.)
In this approach, we will use the dot (.) selector to select multiple elements having the same class names and apply the same set of styles to them using CSS.
Example
In this example, we will select a "p" tag and a "span" HTML tag using their class, and give them a text color "red" using CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to apply CSS style to the different elements having the same class name in HTML?</title>
<style>
.sample {
color: red;
font-weight: bold;
margin: 10px 0;
}
</style>
</head>
<body>
<p class="sample">This is p tag content!</p>
<span class="sample">This is span tag content!</span>
</body>
</html>
Both the paragraph and span elements display in red, bold text with 10px top and bottom margins. The styling is applied uniformly to all elements with the "sample" class.
Method 2: Using Element-Specific Class Selectors
In this approach, we will apply different sets of styles to elements that have the same class names using CSS. For this, we will use the HTML tag name followed by the dot (.) selector to target a particular element and give the desired CSS styles to it.
Example
In this example, we will select a "p" tag and a "span" HTML tag using their class and give them different text colors using CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to apply CSS style to the different elements having the same class name in HTML?</title>
<style>
p.sample {
color: red;
font-size: 18px;
padding: 10px;
}
span.sample {
color: green;
background-color: #f0f0f0;
border-radius: 5px;
padding: 5px;
}
</style>
</head>
<body>
<p class="sample">This is p tag content!</p>
<span class="sample">This is span tag content!</span>
</body>
</html>
The paragraph appears in red text with 18px font size and 10px padding. The span appears in green text with a light gray background, rounded corners, and 5px padding. Each element receives distinct styling despite sharing the same class name.
Conclusion
CSS class selectors provide flexible ways to style HTML elements. Use the simple dot selector to apply uniform styles to all elements with the same class, or combine element names with class selectors to apply different styles to specific element types sharing the same class.
3K+ Views
