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.