Class and ID Selectors

Rumman Ansari   Software Engineer   2022-12-25   232 Share
☰ Table of Contents

Table of Content:

Class and ID Selectors

There are variety of selectors that help us in applying styles to particular element based on our need.

Let's start with learning about the Class and ID selectors.

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Note: An id name cannot start with a number!

Example

The CSS rule below will be applied to the HTML element with id="para1": 


<style>
#paragraph {
  text-align: center;
  color: red;
}
</style>

Output:

If you will run above code, you will get below output.

Full code: 


<!DOCTYPE html>
<html>
<head>
<style>
#paragraph {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="paragraph">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Example

In this example all HTML elements with class="center" will be red and center-aligned: 

You can also specify that only specific HTML elements should be affected by a class.


.center {
  text-align: center;
  color: red;
}

Example

In this example only <p> elements with class="center" will be red and center-aligned: 

HTML elements can also refer to more than one class.


p.center {
  text-align: center;
  color: red;
}

Example

In this example the <p> element will be styled according to class="center" and to class="large": 


<p class="center large">This paragraph refers to two classes.</p>
‹ Previous not possible this is first one.
‹ Next