हेल्लो दोस्तों ! आज हम इस आर्टिकल में CSS Selectors Types के बारें में पढेंगे. इसे बहुत ही आसान भाषा में लिखा गया है. इसे आप पूरा पढ़िए, यह आपको आसानी से समझ में आ जायेगा. तो चलिए शुरू करते हैं:-
CSS Selectors kya hai : CSS Selectors एक Web Page के लिए बहुत ही Important होते हैं. CSS Selectors के through हम उस Content को Select करते हैं, जिसके लिए हम CSS लिखना चाहते हैं.CSS Selectors का Use हम उन HTML Elements को “खोजने” (या चुनने) के लिए किया जाता है जिन्हें हम स्टाइल करना चाहते हैं।
CSS Selectors Types
CSS में कुछ important selectors इस प्रकार हैं –
- Element / Tag selector
- ID selector
- Class selector
- Universal selector
- Group selector
- Attribute selector
CSS Element / Tag Selector
इस type के selectors में , हम direct HTML elements के name से ही select करके style apply करते हैं।
CSS Element / Tag Selector Example :-
<!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>
CSS ID Selector
ID Selectors HTML elements में define की गयी ID के bases पर elements को select करते हैं। ID के साथ define किये गए element को select करने के लिए #idname (hash) का use किया जाता है।
CSS ID Selector Example :-
<!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>
CSS Class Selector
यह elements में define की गयी class के bases पर elements को select करते हैं। class के साथ define किये गए element को select करने के लिए .class (dot) का use किया जाता है।
CSS Class Selector Example :-
<!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>
CSS Universal selector
Universal selector के through web page में present सभी elements (ID, class , tag) select हो जाते हैं।
CSS Universal Selector Example :-
<!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>
CSS Group selector
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 करते हैं।
CSS Group Selector Example :-
<!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>
CSS Attribute selector
Style Apply करने के लिए ID , class के अलावा आप attribute के name से भी select कर सकते हैं , उसके लिए आपको उस element के साथ attribute का name (element[attribute]) define करना पड़ता है। HTML elements में ID , class ये attributes ही होते हैं।
CSS Attribute Selector Example :-
<!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>
