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;
}