Have you ever wondered that how do our webpages or websites look so attractive. This is generally because Cascading style sheets (CSS). There are many concepts underlying with the css one such thing is css selectors.

A CSS selector selects the element that we want to style. These selectors are of many kind some of the them are listed below :

• Universal selector
• Individual selector
• Class and id selector
• And(chained) selector
• Combined selector
• Inside an element selector
• Direct child selector
• sibling selector
• Pseudo selector

1. UNIVERSAL SELECTOR The universal selector denoated by (*) can select all the elements and style them as required.

                    * {
                            class declarations;
                       }

2. INDIVIDUAL SELECTOR This selector selects individual element and style them as required.

                      p {
                              background-color : black;
                        }

3. CLASS AND ID SELECTOR The class selector selects HTML elements with a specific class attribute . To select elements with a specific class, write a period(.) character followed by class name

                       .class name
                       {
                                      text-align : center;
                                      color : red;
                       }

4.AND SELECTOR The And selector is used to select a particular element which is satisfying two or more conditions at the same time.

                                <li class="btn bgc">Hello world</li>
                                 li.btn.bgc{
                                              text-align: center;
                                               color: blue;
                                   }

The CSS rule below will be applied to the li element with class="btn bgc":

5.COMIBINED SELECTOR Combined selector selects and style two or more elements.

                                    div, p{
                                          background-color : black
                                    }

This CSS rule will be applied to the both div tag elements and p tag elements.

6. INSIDE AN ELEMENT SELECTOR

The inside an element selector is used to select elements inside the elements.

                                   div p{
                                       background-color: yellow;
                                  }

select and style every p tag element that is inside div elements.

7.DIRECT CHILD SELECTOR

The Direct child selector is used to select the elements with a specific parent.

                                  div > p {
                                        background-color: yellow;
                                  }

select and style every p element where the parent is a div element.

8. SIBLING SELECTOR

->ADJACENT SIBLING SELECTOR

The adjacent sibling selector is used to select an element that is directly after another specific element.

Sibling elements must have the same parent element, and "adjacent" means "immediately following".

The following example selects the first p element that are placed immediately after div elements:

                                div + p{
                                        background-color: yellow;
                              }

-> GENERAL SIBLING SELECTOR

The general sibling selector selects all elements that are next siblings of a specified element.

The following example selects all p elements that are next siblings of div elements.

                              div ~ p{
                                      background-color : yellow;
                              }

9. PSEUDO SELECTOR

The :: before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML.

                             div:: before{
                                      content: "before";
                             }
                             div:: after{
                                      content: "after";
                             }