CSS provides multiple ways to modify the appearance of an element. CSS selectors are one of them, selectors allow us to target an HTML element and specify a style of our choice on any HTML element.
In CSS there are five categories of selectors i.e. simple, combinator, pseudo-class, pseudo-element, and attribute selector. This write-up presents a detailed overview of one of the simple selectors i.e. class selector and it will be discussing the following terminologies related to class selector:
- What is a Class selector
- Basic Syntax of class selector
- How to use class selector
- How to use class selector for some specific HTML elements
Let’s start this discussion with the basic definition of class selector:
Class Selector in CSS
A class selector targets the element(s) with specific class name(s). The following syntax will provide you more clarity about the class selector.
Syntax
The basic syntax starts with a dot “.” followed by class name which represents that it’s a class selector.
In the above figure “.” shows that it’s a CSS class selector, “style” represents the class name.
How to Use CSS Class Selector
CSS class selector can be used to set the style of some specific HTML elements.
Example
Let’s have a look at the below-given code, it utilizes the class selector to style some specific HTML elements.
<head>
<style>
.style {
background-color: black;
color: orange;
text-align: center;
}
.style1{
background-color: black;
color: gold;
text-align: center;
}
</style>
</head>
<body>
<h3 class="style">CSS Class Selector</h3>
<p class="style"> First Paragraph </p>
<p class="style1"> Second Paragraph</p>
</body>
</html>
The above code utilizes two class selectors. The <h3> and first <p> element uses the same class so the same style will be implemented, while the second <p> element will be styled differently:
How to Use CSS Class Selector for Specific HTML Elements
We can use the CSS class selector in order to affect specific HTML elements. For this purpose we have to specify the element’s name prior to the dot “.”, as shown in the following figure:
The above figure describes that select all the <p> elements having the class name “style” and set the background color as blue.
Example
In this example, the style1 class is specified to <p> and <h1> elements. However, only <p> elements having the class attribute “style1” can access the styling properties of style1 and the <h3> element will remain unstyled.
Output
How to implement Multiple styles on HTML element
As an HTML element can have multiple class names in its class attribute so we can apply different styling based on the class names.
Example
In the below code the first paragraph will implement the properties of both style classes.
<head>
<style>
.style {
color: red;
text-align: center;
}
.style1{
font-style: italic;
background-color: slategray;
text-align: center;
}
</style>
</head>
<body>
<h3 class="style">CSS Class Selector</h3>
<p class="style style1"> First Paragraph </p>
<p class="style1"> Second Paragraph</p>
</body>
</html>
The above piece of code will generate the following output:
The output verifies that the first paragraph utilizes the properties of both classes ‘style’ and ‘style1’.
Conclusion
A class selector selects the HTML element for styling in CSS using its class name and it starts with a dot “.” followed by the class name. This write-up presents a comprehensive overview and core concept of CSS class selectors, how to use class selectors, how to use a class selector for some specific HTML elements with the help of examples.
