CSS class selector selects all the elements that have the specified class attribute. The class selector is used when we want to apply the same CSS styles to multiple elements within a page.
To select multiple elements using the class selector, use a period sign(.) followed by the name of the class. For example, .success, .center, etc.
In the example below, the class selector selects all the HTML elements that have the class 'success' and applies same set of styles to each of them. Try it out:
Example:
.success{
background: springgreen;
padding: 10px;
}
It is also possible to select only specific types of elements that have the specified class name. To do this, you have to first write the element name, then the period sign(.), followed by the name of the class. For example, div.myClass.
In the example below, the class selector selects all the <div> elements that have a class 'success'.
Example:
div.success{
background: springgreen;
padding: 10px;
margin-bottom: 10px;
}
CSS Class Selector Syntax
The class selector has the below syntax:
.className{
CSS styles
}
Related Pages
CSS Tutorial: CSS Selectors
