CSS - Selectors Are Case-insensitive in hindi

Selectors Are Case-insensitive

Selectors ये case-insensitive होते है | आप एक ही selector को uppercase और lowercase में अलग-अलग देते हो तो उनके styles को combine किया जाता है | जैसे कि निचे picture में दिया हुआ है |

Example

Example पर एक ही selector को lowercase और uppercase में दिया गया है | अगर दोनों case-insensitive selectors पर अलग-अलग Style दी जाती है तो उन्हें combine किया जाता है |

<style>
.myclass{
 color : red;
 background-color : blue;
}
.MYCLASS{
 font-weight : bold;
 font-style : italic;
}
</style>

<div class="myclass">Hello World</div><br />
<div class="MYCLASS">Hello World</div>

Example for Style Overwriting

CSS Style को Overwrite भी किया जाता है | Example पर lowercase selector(.myclass) पर color; red है और uppercase selector(.MYCLASS) पर color; blue दिया गया है | लेकिन HTML Element पर सबसे पासवाली style ही apply हो जाती है |

<style>
.myclass{
 color : red;
}
.MYCLASS{
 color : blue;
}
</style>

<div class="myclass">Hello World</div><br />
<div class="MYCLASS">Hello World</div>

Another Example for Style Overwriting

Example में Element पर paragraph element के साथ उसे class भी दिया गया है | ऐसी situation में HTML Element Selector से ज्यादा महत्व class selector को दिया जाता है |

Example पर paragraph element के सबसे नजदीक class attribute होने के कारण class selector की style को apply किया गया है |

<style>
.myclass{
 color : red;
p{
 color : blue;
}
</style>

<p class="myclass">Hello World</p>