If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
CSS में selectors , HTML elements हैं जिनके ऊपर हम style apply करते हैं , जिस तरह से JavaScript selectors होते हैं उसी तरह से CSS में भी।
Web page में style apply करने के लिए Selector का use किया जाता है। यह elements और other organized words का एक pattern है जो browser को उस elements पर define की गयी design / style apply करके show कराता है।
CSS में कुछ important selectors इस प्रकार हैं -
इस type के selectors में , हम direct HTML elements के name से ही select करके style apply करते हैं।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Element / Tag Selector</title>
<style>
/*change page background color:black*/
body {background-color: black;}
/*all h3 headings color : red*/
h2 {color: red;}
</style>
</head>
<body>
<h2>CSS Element Tag Selector</h2>
</body>
</html>ID Selectors HTML elements में define की गयी ID के bases पर elements को select करते हैं। ID के साथ define किये गए element को select करने के लिए #idname (hash) का use किया जाता है।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS ID Selector</title>
<style>
/*select according to ID*/
#myheading{color: red;}
</style>
</head>
<body>
<h2 id="myheading">CSS ID Selector</h2>
</body>
</html>यह elements में define की गयी class के bases पर elements को select करते हैं। class के साथ define किये गए element को select करने के लिए .class (dot) का use किया जाता है।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS class Selector</title>
<style>
/*select according to class*/
.myclass{color: red;}
</style>
</head>
<body>
<h2 class="myclass">CSS class Selector</h2>
</body>
</html>Universal selector के through web page में present सभी elements (ID, class , tag) select हो जाते हैं।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS universal Selector</title>
<style>
/*select all element*/
*{color: blue; font-weight: bolder;}
</style>
</head>
<body>
<h2>Heading Tag</h2>
<p>Paragraph</p>
<div>Div</div>
<span>span</span>
</body>
</html>Well , अभी तक हम ID या class selectors के through हम अलग - अलग style apply कर रहे थे। लेकिन जब हमें कई elements पर same style apply करनी होतो हम कई elements को Tag , ID या class का use करके एक साथ भी select कर सकते हैं।
Don't use it for same style
#myID{color: blue; font-weight: bolder;}
.myclass{color: blue; font-weight: bolder;}
span{color: blue; font-weight: bolder;}इसकी जगह आपको यह use करना चाहिए।
#myID, .myclass, span{color: blue; font-weight: bolder;}एक से ज्यादा elements को एक साथ elect करने के लिए selectors को comma ( , ) से separate करके elements को select करते हैं।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Group Selector</title>
<style>
/*select needed elements at once*/
#myID, .myclass, span{color: blue; font-weight: bolder;}
</style>
</head>
<body>
<h2 id="myID">My Heading</h2>
<p class="myclass">My Paragraph</p>
<span>Normal Para</span>
</body>
</html>Style Apply करने के लिए ID , class के अलावा आप attribute के name से भी select कर सकते हैं , उसके लिए आपको उस element के साथ attribute का name (element[attribute]) define करना पड़ता है। HTML elements में ID , class ये attributes ही होते हैं।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Attribute Selector</title>
<style>
body {background-color: black;}
h2[test='attribute'] {color: red;}
</style>
</head>
<body>
<h2 test='attribute'>Test Attribute</h2>
</body>
</html>I Hope, अब आप के बारे में अच्छे से समझ गए होंगे।