CSS Selectors
The HTML content you want to style is chosen using CSS selectors. The CSS rule set includes selectors. HTML elements are chosen using CSS selectors based on their id, class, type, attribute, etc. In CSS, there are numerous different varieties of selectors. Selectors for elements, identifiers, classes, universal selectors, groups, Combinators, etc.
p{
color : pink;
}In the above code, p is an element Selector which selects our p tag and applies css properties.
Universal selector
All HTML items on the page are selected by the universal selector (*).
/* selects all the html element's */
*{
color : green;
}Limiting it to a certain namespace or to all namespaces is optional. When using @namespace, universal selectors may be namespaced. This is helpful when working with documents that combine many namespaces, such as XML that uses various vocabularies or HTML5 that includes inline MathML or SVG. When using basic selectors, the asterisk is not required. .code and *.code, for instance, are similar.
Example of universal selector
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: blue;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>This is Codeshruta</h1>
<p>universal selector</p>
<p id="code">select all the</p>
<p>html Elements</p>
</body>
</html> 
Type/Element Selectors
Based on the element name, the CSS element selector chooses HTML elements. In other words, it chooses every case of the specified type of element within a document.
Example of Element Selectors
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: blue;
text-transform: uppercase;
}
p{
color : red;
}
</style>
</head>
<body>
<h1>This is Codeshruta</h1><p>universal selector</p>
<p id="code">select all the</p>
<p>html Elements</p> </body> </html> 
Class selectors
HTML components having a specific class attribute are chosen using the class selector. Put a dot mark (.) after the class name to select elements that belong to that class.
.tag{
color : red;
}
/* select class name first */
.name{
color : blue;
}Example of class Selectors
<!DOCTYPEE html>
<html>
<head>
<style>
.first {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="first">Be always happy! </h1>
<p class="second">Codeshruta</p>
</body>
</html>
In the above example, we select our p tag class name first and you can see it works only for the first class element. And others have not changed. You can also define which HTML elements are to be excluded from a class’s effects.
p.first {
text-align: center;
color: red;
}ID Selectors
The id selector chooses a particular HTML element by using the id attribute. The id selector is used to select a single distinct element because each element’s id is distinct inside a page. A hash (#) character should be written after the element’s id in order to pick it. An id name can not start with a numerical value.
/* The element with id="demo" */
#code{
border: red 2px solid;
}Example of id Selectors
<!DOCTYPEE html>
<html>
<head>
<style>
#one{
text-align: center;
border: red 2px solid;
color: blue;
}
</style>
</head>
<body>
<h1 class="first">Be always happy! </h1>
<p class="second" id="one">Codeshruta</p>
</body>
</html>
Grouping selectors
All HTML elements that share the same style definitions are chosen by the grouping selector. To reduce the amount of code, grouping the selectors will be better. Selectors should be separated by commas to be grouped.
Without grouping Selectors
p{
color : red;
}
h1{
color : red;
}
span{
color : red;
}Here you see all Selector properties are same so we can use grouping selector.
With grouping selector
p, h1, span{
color : red;
}The output will be the same for both the code.
Conclusion/Final words
CSS Selectors are very helpful in writing CSS better and cleaner. In the upcoming CSS blogs, we see more about CSS Selectors and we’ll also learn about id and class. If you have any questions or problems, don’t forget to comment.
Thanks for reading!
Written by: Vipin
