Shubh Ujala

Posted on Feb 1

CSS Selectors 101: Targeting Elements with Precision

#webdev #css #programming

First of all let's discuss why do we need CSS?
Just take a simple example , let say you have created a navbar using HTML and you have added all the functionalities in it but without CSS this is how your navbar will looks like will looks like

from any angle is it looks like nav bar? NO, right now let's apply some CSS in it

Now see which feels more engaging , obiously second one means after applying CSS, that's why we need CSS to style the webpages.

Now let's discuss the technical definition of CSS

CSS stands for Cascading Style Sheets, here Cascading term means overriding, this is exactly what we are doing We are overriding the default properties of HTML tags given by browser, and Yes we do have special name for the styling given by browser which is known as User Agent Style.

How to give styles in CSS

We are giving styling in CSS using selectors.

What are Selectors?

Selectors name itself is defining it's definition, basically it is used to select the elements to give styling to them, there are mainly 4 ways to select the element :

1. Element Selector

with the help of element selector , we can target a particular element by using HTML tag and apply the styling in that particular element also we can also apply the styling to it's child element let see how : Here you can see in HTML file , we have a <nav> tag and we have applied the styling to nav tag, so this is how using element selector we can apply the styling. Also We can also apply the stylings to the child elements of any tag using element tag Here you can see we have two child elements <h3> <h4> of nav so this is how we are able to apply the stylings to the child element using element tag.

Where it fails?
When we have multiple same elements inside the parent elements and we don't want to apply the stylings to all elements , this is where it fails
Example :
Here you can see we want different styles for each child of <nav> element but by using the element tag we are unable to do that.

2. Class Selectors

Earlier , using element tag we were not able to give the different styling when we have multiple childs , so class selectors solves this problem for us, basically we have to give different classes to our HTML tag and by using class selectors we can apply different styling for each tags. Let' implement it practically
Syntax to use class selector, We have to use dot(.) in front of the class name and then apply styling , you can refer the example's syntax below

Also we can give multiple class names to tag seperated by spaces like this class = "main div1", and the corresponding styles that we have given is going to applied.

3. ID Selectors

It is another way to target HTML tags to give styling, an ID is used to uniquelly identify any tag so it is generally recommneded to use different id names for multiple tags, you can use same names as well there is no issue with that also.
Syntax to use ID selectos, We have to use # before the name of id , refer the below example's syntax

4. Universal Selector (*)

With the help of universal selectors we can apply the styling to the entire documents, Syntax to use universal selector Example : Here you can see I haven't targeted any particular element instead i have just written (*) and apply the styling and it is getting applied on the whole document this is how universal selectors works.

Grouping CSS selectors

By grouping means, if we want to apply the same styling to the different elements so without grouping we have to write is again and again but with the help of grouping we just have to write it once and done, CSS is going to be applied on all the different elements.

Now let's see the syntax for grouping the element in CSS
We have to use it like this (refer images)
Examples :
1. using element tags only
2. when we have classes and id's with element (generally we have it) then this is how it should be done.

Descendant CSS selectors

By decendent selector means, We are giving styles to the elements which are present inside other elements
Example :

In the above example we are targetting the h2 tag whose path is like this

Main -> div -> h2

that's why while using decendant selector we have used main div h2 means we have to go to the main tag inside that we have to go to div and inside div finnaly we have to style h2

So this is how it works in CSS.

Basic selector pripority in CSS

As we have discussed the way of styling the element in CSS, so there is one question suppose we have applied the styling to using (*) universal selectors

 * {
    color: yellow;
   }

and also we have one div in which some text is there and in the div also we have applied the styling like this

 .div{
    color : red;
 }

Then what should be the color of the content in the div? will it be yellow or black?
let see :
In this example we have used universal selector to give text-color

But ass soon as we have given the styling using class selector it's color changes from yellow to red.

let's add one id to it and let's again try to change the text color using id selector

That's crazy now it is showing pink color , means id is having more priority than class selectors , and class is having more priority than universal , means there must be a priority in CSS.

here is the priority list