Introduction to Types of CSS Selectors
Types of CSS Selectors are used to choose the content we want to style. It helps select elements based on their class, id, type, etc. A CSS Selector is a component of the CSS Ruleset.
Different 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. You can use the Universal Selector in combination with other selectors.
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 of the element selector.
ul {
border: solid 1px #ccc;
}To understand this better, let us look at an example HTML code to apply the CSS code we wrote 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 developer declares the ID name. ID selector matches every HTML element with an ID attribute with the same value as the selector, without the hash sign.
Here’s an example:
#box {
width: 90px;
margin: 10px;
}This CSS code can match the element with 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 element’s styling will still apply; hence having the same ID is usually avoided.
Using a different ID every time for every HTML page is quite rigid. Besides facing rigidity problems, 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. The coder defines this class name, as 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 match the element with 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 with the same class attribute value helps us reuse the styles and avoids unnecessary repetition. The Class Selector is also 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 will not match it. For example, the selector would not match the attribute if the value of ‘type’ changed from ‘text’ to ‘submit.’ Suppose the attribute selector is declared with a quality attribute and no attribute value. In that case, it will match all the HTML elements with the attrib,’e ‘type,’ regardless of whether the value is ‘text’ or ‘submit.’
Example:
input[type] {
background-color: #fff;
width: 100px;
}We can also use attribute selectors with no value specification outside the square brackets. This will help us to target the attribute only, regardless of the element. Our example will target based on the attribute’ type,’ regardless of the element ‘input.’ CSS Selectors help 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 allow us to style similar elements on our web page uniformly. CSS selectors are, thus, an essential 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 –
