html

Class Selector in CSS

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:

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.

<html>
<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.

<html>
<head>
   <style>
      p.style1{
         font-style: italic;
         background-color: slategray;
         text-align: center;
      }
   </style>
</head>

<body>
   <h3 class="style1">CSS Class Selector</h3>
   <p class="style1"> First Paragraph </p>
   <p class="style1"> Second Paragraph</p>
</body>

</html>

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.

<html>
<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.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.