CSS Selectors
18/07/2023
There are multiple types of CSS selectors are used when specifying CSS properties to HTML tags; Check out the universal selector, type selector, class selector, id selector, attribute selector, and grouping selector selector variants.
Universal Selector
* {
box-sizing: border-box;
}With this code every HTML elements have box-sizing: border-box; feature.
Type Selector
Type selector using for match HTML element directly.
div {
padding: 1rem;
}
Class Selector
<style>
.text {
font-size: 20px;
}
</style>
<p class="text">Lorem ipsum dolor sit amet.</p>
ID Selector
With the Id selector, the element’s ID is used to apply the CSS property. The # sign is used when specifying CSS.
<style>
#text {
font-size: 20px;
}
</style>
<p id="text">Lorem ipsum dolor sit amet.</p>
Attribute Selector
The CSS property is applied with the attributes of the HTML tag.
<style>
[target="_blank"] {
color: red;
}
</style>
<a href="#" target="_blank">Link</a>Grouping Selector
#id,
.class,
div,
[target="_blank"] {
color: red;
}