CSS SELECTOR
Selectors are the part of CSS rule set and CSS selectors are used to select the content you want to style in a webpage.
There are 5 types of selectors:- CSS Element Selector
- CSS Id Selector
- CSS Class Selector
- CSS Universal Selector
- CSS Group Selector
CSS Element Selector
As the name suggests, the element selector selects the HTML element by name. The tags to be styled are defined within <style> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align:left;
color:green;
}
h5 {
text-align:center;
color:red;
}
</style>
</head>
<body>
<h5>Example of CSS element selector</h5>
<p>This will be styled as defined in the style tag</p>
<p>This as well.</p>
</body>
</html>
Output:
Example of CSS element selector
This will be styled as defined in the style tag
This as well.
In the above example, s1 is the id that contains the style specifications for the html code. These styles will be applied to the first <p> tag as id name is specified in it. The second <p> tag will not be styled according to the id style specifications.
CSS Class Selector
This selector styles the HTML elements that define the class name in their tag information. Multiple elements can use the styles defined in one class. One thing to keep in mind while defining the class is that a class name shouldn’t start with a number.
The syntax of defining classname is:
.class_name{}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.mango {
text-align:left;
color:red;
}
</style>
</head>
<body>
<h1 class="mango">This heading will use class styles.</h1>
<p class="mango">This paragraph will also be styled.</p>
</body>
</html>
Output:
This heading will use class styles.
This paragraph will also be styled.
In the above example, multiple elements are able to access and use a single class style specifications.
CSS Selector for Specific Element
Unlike the above example, we can specify a particular HTML element to be styled. For that, we use the element name with class selector.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.mango {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="mango">This heading is not affected.</h1>
<p class="mango">This paragraph is affected.</p>
</body>
</html>
Output:
This heading is not affected.
This paragraph is affected.
In the above example, we are using p.mango to specify that only the <p> tags should be able to access and use the style specifications of class mango.
CSS Universal Selector
Inside the code, the universal selector is used as a wildcard character (*). It selects all the elements that are used there on the html page.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
* {
color:green;
font-size:10px;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p> a perfect example for universal selector</p>
<p>It will be applied on all of these paragraphs</p>
</body>
</html>
Output:
This style will be applied on every paragraph.
a perfect example for universal selector
It will be applied on all of these paragraphs
So now everything will get styled, which means that all the text in the above example will have the green color.
CSS Group Selector
Sometimes, there can be different elements in a code with same style definitions. So to make the code concise and easy to comprehend, grouping selector is used. To group multiple elements together, commas (,) are used.
Example:
h1, h2, p {
text-align: center;
color: blue;
}
Here we can see that elements<h1>, <h2> and <p> have same style definitions, hence, we have grouped them together into a single code using commas (,).
A full code example is:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: purple;
}
</style>
</head>
<body>
<h1>this is an example of grouping selector.</h1>
<h2>we can see both headings styled in the same way.</h2>
<p>The paragraph too, is styled the same way.</p>
</body>
</html>
Output:
this is an example of grouping selector.
we can see both headings styled in the same way.
The paragraph too, is styled the same way.