Universal Selector

It is used to apply CSS on entire page

<style>
    *{
        background-color: aqua;
        color: brown;

    }
</style>

Individual Selector

It is used to apply CSS on individual elements oh HTML body

<style>
    p,h1{
        background-color: aqua;
        color: brown;

    }
</style>

class and ID Selector

it is used to apply css on specific classes and ID. you can use no of classes but should have to use unique to apply CSS.

<style>
    .warning{
        background-color: aqua;
        color: brown;

    }
</style>

<style>
    #name{
        background-color: deeppink;
    }
</style>

And Selector

It is used to apply CSS on multiple classes or ID <style>

if you select checked it will get applied on check classess

if you select checked featured then it get applied only on checked featured classes

 <style>
        .checked.featured{
            background-color: aqua;
        }
        .checked{
            color: blue;
        }
        .featured{
            color: chartreuse;
        }
    </style>

Combined selector

it is user to apply CSS on no of element at once

 <style>
    span,li {
    color: red;
} 
   </style>

Inside an element selector

CSS direct child selector

Before pseudo selector and after pseudo selector

---