Css selectors

What is Css and why it is used?

CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. We can define CSS in HTML by three ways

  1. Inline style
  2. External
  3. Style Tag

But Today in this blog we won't discuss about that we will discuss about selectors

Css Selectors:

These selectors defines that CSS rules applied on which elements in our HTML.

In general , we can select the elements from our HTML by three ways

  1. Id
  2. Class
  3. Descandant
So now let us know about the different selectors through which we can style our HTML elements.

Basic selector

1. *

                    * {                    
                        //styling;
                    }

This selector will targets every single element present in the html document. But this not the best way to style HTML elements as this adds much more weight to the browser

2. #

                    #_id_element {                    
                        //styling;
                    }

Selector with prefix # allows us to style element directly by id

3. .X

                    ._class_element {                    
                        //styling;
                    }

Selector with prefix "." allows us to style element directly by the class name . Through this selector we can target multiple groups together.

Use #ID for specific elements whereas use .CLASS for group of elements

4. X Y

                    x  y{                    
                        //styling;
                    }

This is an example of descendant selector. It is used to targe the specific element which are present the first tag that we enter . In our example let x be list tag and y be anchor tag 

                    li a{                    
                        color:red;
                    }

So all the anchor tags inside the list will be in red color

IF we use + between then then it will target the adjacent elements

5. x:visited and x:link

                    a:link{                    
                        //styling;
                    }
                    a:visited{
                        //styling
                    }

This is an example of pseudo selector. This allow us to specifically style the :link pseudo class to target all the links and in the similar way :visited to target all visited links.