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
Selected Reading
Selects all elements with class="mydemo" with CSS
To select all elements with class="mydemo", you can use the CSS class selector. The class selector is denoted by a period (.) followed by the class name.
Syntax
.classname {
/* CSS properties */
}
Example
The following example demonstrates how to select and style all elements with class="mydemo" −
<!DOCTYPE html>
<html>
<head>
<style>
.mydemo {
background-color: #f0f8ff;
border: 2px dashed orange;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<h1 class="mydemo">Heading with mydemo class</h1>
<p class="mydemo">Paragraph with mydemo class</p>
<h2>Heading without mydemo class</h2>
<div class="mydemo">Div with mydemo class</div>
<span>Span without mydemo class</span>
</body>
</html>
The elements with class="mydemo" (h1, p, and div) display with light blue background, orange dashed border, and padding. The elements without the mydemo class (h2 and span) remain unstyled.
Conclusion
The CSS class selector (.classname) is a powerful way to apply styles to multiple elements sharing the same class attribute. It allows for consistent styling across different HTML elements regardless of their tag type.
Updated on: 2026-03-15T12:41:09+05:30
199 Views
Advertisements