# CSS Selectors

css selectors are those  operator where we can exactly mark the required html tag and work on it  helps to connect with the elements in html  inside of a page like parent child relationship

# Types of CSS selectors
**Universal Selector**

It will select all the element in HTML document.

    *{
        background-color: #000000;
    }

*Output- It will changed the background color of whole HTML document in color #000000 (black)*

**Individual Selector **
  p{
      background-color: #f36666;
  }

*Output- It will changed the background color of all "p" tags in HTML document*

**Class and Id Selector**

Class and Id Selector are used to select the HTML element based on their class name attribute or id name attribute. # used for Id and . used for class

        .red{
            background-color: red;
        }
        #green{
            background-color: green;
        }
*Output- It will changed the background color of all red class tags in HTML document to red similarly green will change the background-color of all the id  named green in html to green*

**And Selector **

It helps to select a particular element having one or more than one classes and ids.

      .classA.childclassA{
            background-color: #EF5354;
            color: red;
        }

*Output- It will apply the given property specifically to only those tags whose classes are 'classA' and 'childclassA' in HTML document*
 

      p.classA.classB#nav{
                background-color: #EF5354;
                color: red;
                border: 3px solid #f70000;
            }

*Output- It will apply the given property specifically to only those "p" tags whose classes are 'classA' and 'classB' and id is 'nav' in HTML document*

**Combined Selector**

Combined Selector is used to select multiple elements of the HTML document which required to have a common style.

          div, p.group, a {
              background-color: #1a0beb;
          }

*Output- It will apply the same given property to all the "div" tags and all the "p" tags whose class is 'group' and all the "a" tags in HTML document.*

**Direct child Selector**

Direct child Selector selects the particular elements that are the direct child of a specified element. The greater than (">") is used to select that particular direct child element of a specified HTML element.

          div>li{
              background-color: #f60ec4;
          }

*Output- It will apply the given property to the "li" tag or tags which is inside and direct child of a "div" tag element. It only selects the "li" tags which are the direct child of "div" tags, if there is a "ul" tag inside the "div" tag and inside that "ul" tag there is a "li" tag available, so it can't be select these "li" lags*

**Sibling ~ or + Selector**
*Adjacent sibling selector (+): It will select the second element which immediately follows the first specified element.*

        sibiling + p{
            background-color: #d685c2;
          }
*It will apply the given property to that "p" tag whose class is 'sibling*

**There are some more pseudo selectors**

before ::

Using "before::" we can add some content to an element using "content" property. The content will be added before the selected element.

      p.pseudo::before{
          content: "Hello ";
      }
*Output- It will add the "Hello " text before the content written inside the "p" tag whose class is 'pseudo*
**
hover:
**
*We can make some changes and decorations on that particular element using this selector.*


            li:hover{
                background-color: #2e8c62;
                color: #4d4d4d;
                border: 3px solid white;
            }
so, it will apply the given properties to the "li" tag when on mouse over.

Thank you for reading.