CSS Selectors

CSS selectors are used to select any element and then apply CSS on it. These selectors are very useful in writing a clean and effective code.

CSS Selectors are used in internal and external CSS. Although inline css is also an option but it is never recommended to use. There are various types of selector through which you can select an element. These selectors can be combined together to select a more specific element also.

A CSS Selector can select an element by its id, class, type, attribute, tag, etc. There are many advance CSS Selectors also, that can be combined together to dive deep in the selector's arena.

Some popular CSS Selectors are:

CSS Tag Selector
CSS Id Selector
CSS Class Selector
CSS Group Selector
CSS Universal Selector
CSS Descendant Selector

CSS Tag Selector

The Tag selector is used to select a element based on its tag name. Any tag name in HTML can be used as a Tag Selector. When you use a simple tag selector and give it some style, then all over the webpage that tag's content will use the same CSS style.

Let's look at the syntax of using a Tag Selector:

Syntax

tag-selector{
CSS Styling
}

Example-
p {
color:red;
}

Explanation: In the syntax example, we have used the <p> tag as a tag selector. Now all the paragraphs in the webpage will have red text color. Remember that tags < > will be omitted when using tag selectors. Only tag name will be used.

Look at the example below:

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Element Selector </title>
<meta charset="UTF-8">
<style>
p {
color: gray;
text-align: center;
}
</style>
</head>
<body>
<p> This style will be applied on every paragraph.. </p>
<p> paragraph 1 </p>
<p> paragraph 2 </p>
</body>
</html>

Output

CSS Element Selector Example

This style will be applied on every paragraph..

paragraph 1

paragraph 2

CSS ID Selector

CSS ID selector is used to select a particular element with a specific ID associated with it. An ID of an element is unique in itself, no two elements can have same ID. It makes it easy to select a particular element and give it a proper CSS Styling.

Defining an ID in CSS

To define an ID of an element just use the id attribute. You can write anything as an ID but it should start with an alphabet or an underscore(_).

Syntax

<p id="demo-id">The ID of this paragraph is 'demo_id'.</p>

Look how conviniently we have created this ID and now it can be used to target this specific paragraph only.

Note: When using ID Selectors, the hash(#) symbol is used in front of ID name.

Syntax of using ID Selector:

Syntax

#ID_Name{
Css Styling
}

Example-
#demo-id{
color:red;
}

Explanation: In the example above, the ID #demo-id is used as a selector. Now, wherever this ID is applied, whether in a paragraph, heading, div, or anything, the text color will be red inside that element.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Id Selector </title>
<meta charset="UTF-8">
<style>
#para1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<p id="para1"> Hello World! (This paragraph is affected by style). </p>
<p> This paragraph is not affected by the style. </p>
</body>
</html>

Output

CSS Id Selector

Hello World! (This paragraph is affected by style).

This paragraph is not affected by the style.

Note: If you add same ID to more than one element then it is possible that your browser will allow styling of elements with same ID, but don't ever do that. It is never recommended to use same ID as it can create various problems in combination with other languages like JavaScript, TypeScript, etc.

CSS Class Selector

CSS Class selector works similar to CSS ID selector but with a slight difference. An ID is unique to the element whereas a class can be common to multiple elements. It gives freedom from writing the same CSS multiple times for different elements. If the CSS Style definition is same then just add a common class to the elements and only define CSS for that particular class. It will be applied to all the elements with that class.

Defining a class in CSS

To define a class for an element, just use the class attribute. You can write anything as an class name but it should start with an alphabet or an underscore(_).

Syntax

<p> class="demo-class">The class of this paragraph is 'demo-class'.</p>
<p> class="demo-class">This is 2nd paragraph with same class.</p>
<p> class="demo-class">This is 3rd paragraph with same class.</p>

In the example above, a common class demo-class is used in all paragraphs.

Note: When using Class Selector, the dot(.) symbol is used in front of class name.

Syntax of using Class Selector:

Syntax

.Class_Name{
Css Styling
}

Example-
.demo-class{
color:red;
}

Explanation: Any element which will use the demo-class as class name will display text color as red. It can be applied to more than one elements.

Look at the example below to understand the use of classes.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Class Selector </title>
<meta charset="UTF-8">
<style>
.center {
color: orange;
text-align: center;
}
</style>
</head>
<body>
<h1 class="center"> This heading is orange and center-aligned. </h1>
<p class="center"> This paragraph is orange and center-aligned. </p>
</body>
</html>

Output

CSS Class Selector Examples

This heading is orange and center-aligned.

This paragraph is orange and center-aligned.

CSS Dot(.) Selector

If you want to style only one specific HTML element with a common class name then you can use the dot(.) selector. Suppose there is one paragraph and one heading tag of same class, but you want to stylize only the paragraph, then you should combine the tag name with class name by using dot(.) selector. In this way, only the paragraph will get affected by the CSS and not the Heading.

The syntax is:

Syntax

tag.class-name{
Css Styling
}

Example-
p.demo-class{
color:red;
}

Look at the example below to understand it better:

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Class Selector </title>
<meta charset="UTF-8">
<style>
p.center {
color: seagreen;
text-align: center;
}
</style>
</head>
<body>
<h1 class="center"> This heading will not be affected. </h1>
<p class="center"> This paragraph will be seagreen and center-aligned. </p>
</body>
</html>

Output

CSS Class Selector

This heading will have no affect.

This paragraph will be seagreen and center-aligned.

CSS Grouping(,) Selector

The grouping selector is a very handy selector in case of same CSS Styling for different elements. It minimizes the code.

Suppose, there is a div, a heading and a paragraph and in all of these we want the font color to be red. Instead of declaring same color property 3 times for all 3 elements we can just declare it once using a comma(,).

It is not limited to tags only, multiple tags, IDs, or Classes can be given similar CSS by using the comma(,).

The syntax of using the Grouping Selector:

Syntax

p, h2, div{
color:red;
}

p, .demo-class, h2{
color:red;
}

Explanation: Notice in the above example, how the comma is used to create a grouping selector. We have also combined the tags with a class. Now, all the paragraphs, h2 headings, div or elements with .demo-class will display red color font.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Grouping Selector </title>
<meta charset="UTF-8">
<style>
h1, h2, p {
color: seagreen;
text-align: left;
}
</style>
</head>
<body>
<h1> This heading is seagreen and left-aligned. </h1>
<h2> This heading is seagreen and left-aligned. </h2>
<p> This paragraph is seagreen and left-aligned. </p>
</body>
</html>

Output

CSS Grouping Selector

This heading is seagreen and left-aligned.

This paragraph is seagreen and left-aligned.

CSS Universal Selector

The universal selector is used to select and style all the elements in the webpage. It is generally used to override default padding and margins on a webpage. Universal Selector is represented by the asterisk(*) symbol.

The syntax of using a universal selector is:

Syntax

* {
Css Styling
}

Example-
* {
margin:0;
padding:0;
}

Have a look at the example below:

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Universal Selector </title>
<meta charset="UTF-8">
<style>
*{
color: green;
text-align: left;
font-size:20px;
}
</style>
</head>
<body>
<h1> This is heading 1. </h1>
<h2> This is heading 2 </h2>
<p> This style will be applied on every paragraph. </p>
</body>
</html>

Output

CSS Universal Selector

This is heading 1.

This is heading 2

This style will be applied on every paragraph.

We learnt about some popular CSS Selectors, but there are some advance selectors also which can create a huge impact on Selecting and Styling elements. Stay with us!

Recommended :

1 . Use of Display Visibility in CSS
2 . How Tags are different from Attributes
3 . Position property of CSS
4 . how to use CSS border

5 . How to make tooltip more Interactive using CSS
6 . Change property using Attribute Selector
7 . Create Bootstrap 4 Spinner
8 . Create Simple Login Form

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors