CSS selector का use HTML के जिस element को design देना चाहते उसको find या select करने के लिए किया जाता है।
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Welcome to Technalay </p>
</body>
</html>Types of CSS Selector in Hindi
CSS selector को हम 6 category में devide कर सकते है :
- Element / Tag selector
- ID selector
- Class selector
- Universal selector
- Group selector
- Attribute selector
Simple selectors (Element selector)
इस selector में direct HTML element को target करके उसमे CSS apply करते है।
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Welcome to Technalay </p>
</body>
</html>ID selector
इस selector में किसी element को select करने के लिए सबसे पहले उस element का ID बनाया जाता है जो Hash(#) के साथ लिखा जाता है जैसे कि #myid, अब इस ID को style section या CSS page में target करके CSS mathod apply किया जाता है।
<!DOCTYPE html>
<html>
<head>
<style>
#myid{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="myid">Welcome to Technalay </p>
</body>
</html>Class selector
इस selector में किसी element को select करने के लिए सबसे पहले उस element का class बनाया जाता है जो डॉट(.) के साथ लिखा जाता है जैसे कि .myid, अब इस class को style section या CSS page में target करके CSS mathod apply किया जाता है।
<!DOCTYPE html>
<html>
<head>
<style>
.myclass{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p class="myclass">Welcome to Technalay </p>
</body>
</html>Universal selector
Universal selector के use करके आप webpage के सारे elements को target करके CSS methods apply कर सकते है। चाहे वो किसी भी selector (ID, class) के अंदर हो।
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>Welcome to Technalay </p>
</body>
</html>अभी तक हमने सीखा जिसमे single element या id, class को select कर रहे थे अब हम सीखेंगे एक साथ एक से अधिक elements को कैसे select करते है।
Group selector
जब हमे एक से अधिक element को select करना होता है या कई elements में same style apply करना होता है, तो हम group selector का उसे कर रहे होते है। जिसमे आप Id, class, element name को एक साथ लिख रहे होते है।
मान लो आपको तीन अलग अलग element में के color को रेड करनी है तो
#myID{color: blue;}
.myclass{color: blue;}
span{color: blue;}ऐसा ना लिख के आप कुछ ऐसा लिख सकते है जो आपके लिए एक best practice रहेगा :
#myID, .myclass, span{color: blue;}<!DOCTYPE html>
<html>
<head>
<style>
#myID, .myclass, span{color: blue;}
</style>
</head>
<body>
<h1 id="myid">Hello World</h1>
<p class="myclass">Welcome to Technalay </p>
<p>Thank<span>You</span></p>
</body>
</html>Attribute selector
किसी भी एलिमेंट को style देने के लिए आप ID, Class के अलावा attribute के नाम से भी target या select कर सकते है, जिसके लिए आपको उस element के साथ कोई attribute लिखना पड़ेगा जैसे कि element[attribute]
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: black;}
h2[test='attribute'] {color: red;}
</style>
</head>
<body>
<h2 test='attribute'>Welcome to Technalay</h2>
</body>
</html>