Back to: CSS Tutorials for Beginners and Professionals
More on CSS Selectors with Examples
In this article, I am going to discuss More on CSS Selectors with Examples. Please read our previous article where we discussed Diving Deeper into CSS with Examples.
CSS Classes
CSS Class selectors are very useful, we can define re-usable rules with them and apply them to any element which should receive the rule.
An element can have more than one class. Both two rules will be applied independently to that same element and if they both are applied to set a certain style on the element, then the normal specificity and order rules will apply, the order in this class list here is not important regarding this.
Example: Element with More than one CSS Classes
Let us understand applying multiple CSS Classes to an element with an example. Please have a look at the below code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
.inactive{
color:red;
}
.active{
color:green;
}
</style>
</head>
<body>
<main>
<section class="product-overview">
<h1>
<p class="active inactive"> Paragraph with more than two classes!</p>
</h1>
</section>
</main>
</body>
</html>
Output:
Explanation
The paragraph tag has two classes applied to this active and inactive. Both the classes are setting the style color as red and green respectively.
But in output, the color is green why? Does the order of class matter let’s change and see the output?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
.active{
color:green;
}
.inactive{
color:red;
}
</style>
</head>
<body>
<main>
<section class="product-overview">
<h1>
<p class="active inactive"> Paragraph with more than two classes!</p>
</h1>
</section>
</main>
</body>
</html>
Output:
The class which is defined later in the styles would win. We have looked into the selectors in our previous articles. Basically, the followings are the selectors available in CSS officially
- Element or Tag Selector
- Class Selector
- Universal Selector (*)
- Id Selector
- Attribute Selector
Now, have a look at one more selector which is not officially but useful in many cases
p.active{
color:green;
}
This targets an element that is a paragraph tag and which has the active CSS class and to such an element, the following styles will get applied.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
p.active{
color:green;
}
</style>
</head>
<body>
<main>
<section class="product-overview">
<h1>
<p class="active"> Paragraph with more than two classes!</p>
</h1>
</section>
</main>
</body>
</html>
Output:
This can of course target more than one element because you could have more than one paragraph tag with the active class and this also is not limited to tag class selector combinations, we could have two classes, we could have an ID in a class or a tag as with a class is here or a tag with two classes.
With CSS ID Selectors
#product-overview__p.active{
color:green;
}
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
#product-overview__p.active{
color:green;
}
</style>
</head>
<body>
<main>
<section class="product-overview">
<h1>
<p id="product-overview__p" class="active "> Selector with active class</p>
</h1>
</section>
</main>
</body>
</html>
Output:
CSS Class Selectors vs ID Selectors
There are cases where we would just use a class selector once, should we then use it or should we use an ID selector instead, when should we use which kind of selector?
The advantage of CSS classes is that they’re reusable, we can add them to any HTML element which should get a certain style, and they allow us to mark and name things for styling purposes only. We create these classes only to apply certain styles, they don’t really have any other meaning. So, classes are really something strongly connected to CSS, and therefore, using a class to style something is rarely wrong.
ID selectors can be only used once per page. If we get a certain style that really should just affect one element on our page and never more, using an ID selector definitely is not a bad idea. However, it’s important to keep in mind that IDs also got a none CSS meaning on our page, mostly the thing that you can link to IDs. So, therefore using IDs just to apply a style is not really recommended.
So, therefore use ID selectors if we planned on using an ID anyways if it semantically makes sense but doesn’t just add them because we want to add some style.
Not Recommended Way:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
#product-overview__p{
color: blue;
}
</style>
</head>
<body>
<main>
<section class="product-overview">
<h1>
<p id="product-overview__p">This is a sample text!</p>
</h1>
</section>
</main>
</body>
</html>
Output:
Recommended Way:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
.active{
color: blue;
}
</style>
</head>
<body>
<main>
<section class="product-overview">
<h1>
<p class="active"> This is a sample text!</p>
</h1>
</section>
</main>
</body>
</html>
Output:
In the next article, I am going to discuss !Important Property in CSS with Examples. Here, in this article, I try to explain More about CSS Selectors with Examples. I hope this More on CSS Selectors with Examples article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.
Registration Open For New Online Training
Enhance Your Professional Journey with Our Upcoming Live Session. For complete information on Registration, Course Details, Syllabus, and to get the Zoom Credentials to attend the free live Demo Sessions, please click on the below links.