CSS Pseudo-classes &Selectors

It's a way to style and based on the change in the state like : hover , : focus ,:active not only that there are few more let us discuss it in this article : focus Let perform all the CSS selectors on HTML

<div> This is div </div>
<span> This is span </span>
<ul>
<li>Item -1</li>
<li>Item -2 </li>
<li>Item-3</li>
<li> Item-4 </li>

universal selector: Is used to selector literally everything CSS

*{
background:red;
}

Type selector Type selector is used to select any element through it type it may be div , span , ul ,li ...etc

div{
background:red;
}

class selector selecting the HTML element through class

<div class="red"> This is div </div>
<span> This is span </span>
<ul>
<li class="red">Item -1</li>
<li>Item -2 </li>
<li>item-3</li>
<li>Item-4 </li>

CSS

.red{
    background:red;
    }

div.red{
 background:red;
color:white;
}

It means div which as a red class name select that element

HTML

<div class="red white-text"> This is div-1 </div>
<div class="red"> This is div-2 </div>
<span> This is span </span>
<ul>
<li class="red green-text">Item -1</li>
<li>Item -2 </li>
<li>item-3</li>
<li>Item-4 </li>

div. red .green-text it means element which is a div which has both red and green-text class to it then css property will be applyed CSS

div.red.green-text{
    background:red;
    color:white;
    }

*** AND selector ***
span, li{
    background:red;
    color:white;
    }

This means that selecting selecting both span and li

span, li.red{
    background:red;
    color:white;
    }

selecting the span and the li which having class red

Descendant Selector

ui li{
    background:red;
    color:white;
    }

selecting all the li which are in ui

  <div class="red green-text"> This is div-1 </div>
    <div class="red"> This is div-2 </div>
<span> This is span </span>
<div>
    <span>
        <b>rested text</b>
    </span>
</div>
<ul>
<li class="red">Item -1</li>
<li>Item -2 </li>
<li>item-3</li>
<li>Item-4 </li>

CSS

div b{
    background:red;
    color:white;
    }