CSS Selectors 101: Targeting Elements with Precision
Topics that we are going to cover in this blog.
Why CSS selectors are needed?
Element selector
Class selector
ID selector
Group selectors
Descendant selectors
Basic selector priority (very high level)
Why CSS selectors are needed?
While you write your HTML code it comes with default user agent stylesheet( default browser styling) which is different in every browser so to make them looks same in every browser we need to cascade them. So, we need selectors to target the HTML elements and change there property.
There is a difference between Overwrite and Cascading, if you change one property and it results in change in all properties than its called Overwrite whereas if we change one property and it results in change in only the selected properties than its called Cascading Stylesheet. So, this is how CSS named , you will definitely never forgot that.
Element Selector
Its like selecting the HTML tags by there names. For example
h1 {
background-color: #414141; // hexcode of a colour
}
Class Selector
This is helpfull when your HTML tags belongs to various different class or groups. Target such class is done by .className ,they are having priority higher than Element selector.
.group-one{
color: #213121;
font-size: 20px;
}
ID Selector
Its like calling your friend on his/her number. And id should be unique for everyone. They are having more priority than the class selector and you can access the id by using #idName.
#id-name {
color: #313131;
font-family: TImes-new-Roman;
}
Group Selector
Its like targeting group of HTML element at once by there comman id,class or just name selector.
.group-one , h1{
display: flex;
margin: 20px auto;
}
Descendant selectors
Its like accessing the child or grandchild form the parent elements or tags. It is done similar to group selector but here we don’t use the comma ( , ). We use space ( ) and we go from outside to inside to access everything in order. for example we have a <section> and inside it there is a <div> and inside div a <h1> tag is present. How you access the h1 now?
section div h1{
color : #66ff1e;
background-color: #414141;
}
Basic Selector Priority
Every selector has its priority. As we know, CSS executes its code from top to bottom. So, it is possible if you write the same name selector twice with the same property but different values, the last value is taken as the current value. Whereas if we talk about Class selectors and Element selectors, the Class selector always has a higher priority to override the Element selector properties. If we talk about the ID selector, then it has the highest priority among all. But once you use inline CSS, which is basically just going into your HTML file and mentioning any CSS property directly to your target tag, then no other CSS selector (ID, Class, normal, or any) can change or override it. Because it’s like picking the caller of the opponent in the fight.
We also have a !important which is used to directly mention that its having the highest priority whether its element selector , ID selector or class selector nothing effects it.
Conclusion
CSS is something interesting to learn, now you have to seach about what is difference between Tailwind vs CSS and second ShadCn vs Tailwind. Also Search about the Atomic CSS what are those and what are the difference it posses with normal CSS that we just discussed in this blog.
