Introduction to Types of CSS Selectors
Types of CSS Selectors are used to choose the content that we want to style. It helps in selecting elements based on their class, id, type, etc. A CSS Selector is a component of the CSS Ruleset.
Types of CSS Selectors
There are 5 varieties of CSS Selectors available for us. We will be looking at the following important CSS Selectors:
- CSS Universal Selector.
- CSS Element Selector.
- CSS Id Selector.
- CSS Class Selector.
- CSS Attribute Selector.
1. CSS Universal Selector
In an HTML page, the content depends on HTML tags. A pair of tags defines a specific webpage element. The CSS universal selector selects all the elements on a webpage.
Example:
* {
color: blue;
font-size: 21px;
}
These two lines of code surrounded by the curly braces will affect all the elements present on the HTML page. We declare a universal selector with the help of an asterisk at the beginning of the curly brace. Universal Selector can be used along with the other selectors in combination.
2. CSS Element Selector
CSS Element Selector is also known as a Type selector. Element Selector in CSS tries to match the HTML elements having the same name. Therefore, a selector of <ul> matches all the <ul> elements i.e. all the unordered lists in that HTML page.
Let us look at an example for the element selector.
4.5 (8,431 ratings)
View Course
ul {
border: solid 1px #ccc;
}
To understand this better, let us look at an example HTML code to apply the CSS code that we have written above.
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div class="demo">
<p>Demo text</p>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3 </li>
</ul>
In this example, we will find mainly three elements namely the <ul> element, the <div> tag and another <ul> element. Since our CSS code applies to the <ul> tag specifically, the changes in the border will be done only for our <ul> tags, and not for the <div> tags. Usually, these changes do not apply to the content of the <ul> tags as well, but in some scenarios, the styles may apply to the inner elements.
3. CSS ID Selector
CSS ID selector helps the developer to match the ID created by the developer to its styling content. ID Selector is used with the help of the hash (#) sign before the ID name declared by the developer. ID selector matches every HTML element having an ID attribute with the value the same as that of the selector, without the hash sign.
Here’s an example:
#box {
width: 90px;
margin: 10px;
}
This CSS code can be used to match the element having the id ‘box’, like in the following sentence.
<div id=”box”></div>
Here, the tag <div> is just an example. We can write the ID attribute for any HTML tag. The ID Selector matches the ID attribute within the element and looks for its styling. In our example, the styling applies as long as any element contains the ID attribute ‘box’.
The value of the ID being used is supposed to be unique. If the same ID is used for two or more elements, the code is technically invalid, but the styling of the element will still apply, hence having the same ID is usually avoided.
Having to use a different ID every time for every HTML page, is quite rigid. Besides facing problems of rigidity, ID selectors in CSS also face the issue of specificity.
4. CSS Class Selector
The CSS Class selector is one of the most helpful selectors of all the selectors. It is declared by using a dot followed by the name of the class. This class name is defined by the coder, as is the case with the ID selector. The class selector searches for every element having an attribute value with the same name as the class name, without the dot.
Example:
.square {
margin: 20px;
width: 20px;
}
This CSS code can be used to match the element having the class ‘square, like in the following sentence.
<div class="square"></div>
This style also applies to all the other HTML elements having an attribute value for the class as ‘square’. An element having the same class attribute value helps us in reusing the styles and avoids unnecessary repetition. Additionally, the Class Selector is beneficial because it permits us to add several classes to a particular element. We can add more than one class to the attribute by separating each class with space.
Example:
<div class=”square bold shape”></div>
Here square, bold and shape are three different types of classes.
5. CSS Attribute Selector
The CSS Attribute selector styles content according to the attribute and the attribute value mentioned in the square brackets. No spaces can be present ahead of the opening square bracket.
input[type="text"] {
background-color: #fff;
width: 100px;
}
This CSS code would be a match for the following HTML element.
<input type="text">
Similarly, if the value of the attribute ‘type’ changes, the Attribute selector would not match it. For example, the selector would not match the attribute if the value of ‘type’ changed from ‘text’ to ‘submit’. If the attribute selector is declared with only the attribute, and no attribute value, then it will match to all the HTML elements with the attribute ‘type’, regardless of whether the value is ‘text’ or ‘submit’.
Example:
input[type] {
background-color: #fff;
width: 100px;
}
We can also make use of attribute selectors with no specification of a value outside the square brackets. This will help us to target the attribute only, regardless of the element. In our example, it will target based on the attribute ‘type’, regardless of the element ‘input’. CSS Selectors help us to simplify our code and enable us to utilize and reuse the same CSS code for various HTML elements. They help us in styling specific segments and portions of our webpage. They provide us with the option of uniformly styling similar elements in our web page. CSS selectors are thus, an important part of the learning curve of CSS.
Recommended Articles
This has been a guide to Types of CSS Selectors. Here we have discussed the different types of CSS selectors with respective examples. You can also go through our other suggested articles to learn more –
