* {
margin: 0;
padding: 0;
}CSS Selectors in Hindi
CSS Selectors का काम होता है HTML elements को identify करना, ताकि उन पर style apply की जा सके। हर selector यह बताता है कि CSS rules किन elements पर लगेंगे।
1. Universal Selector (*)
Universal Selector को star * से लिखा जाता है। यह page के सभी HTML elements पर एक साथ style apply करता है।
Example:
इसका use पूरे web page को reset करने या common style देने के लिए किया जाता है।
2. Element Selector
Element Selector directly HTML tag के नाम से लिखा जाता है। जैसे p, h1, div आदि। इससे उस tag पर style लगती है।
Example:
p {
color: green;
}यह सभी <p> elements को green color देगा।
3. ID Selector (#)
ID Selector को # के साथ लिखा जाता है और यह एक unique element को target करता है। हर element का ID अलग होना चाहिए।
Example:
#header {
background-color: blue;
}HTML में:
<div id="header">My Website</div>
4. Class Selector (.)
Class Selector को . के साथ लिखा जाता है और यह multiple elements पर apply हो सकता है। एक ही class को कई elements में use किया जा सकता है।
Example:
.box {
border: 1px solid black;
}HTML में:
<div class="box">Box 1</div>
<div class="box">Box 2</div>5. Grouping Selector
Grouping Selector से हम एक ही CSS rule को multiple selectors पर apply कर सकते हैं। इसमें comma , का use होता है।
Example:
h1, h2, h3 {
font-family: Arial;
color: navy;
}इससे तीनों headings पर एक ही style लगेगा।
6. Descendant Selector
Descendant Selector किसी element के अंदर मौजूद दूसरे element को target करता है। इसमें space का use किया जाता है।
Example:
div p {
color: red;
}यह उन सभी <p> tags को red बनाएगा जो <div> के अंदर हैं।
Example HTML and CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selectors Example</title>
<style>
/* Universal Selector */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Element Selector */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
}
h1 {
color: darkblue;
}
/* ID Selector */
#main-heading {
text-align: center;
text-decoration: underline;
}
/* Class Selector */
.highlight {
background-color: yellow;
font-weight: bold;
}
/* Grouping Selector */
h2, h3, p {
margin-bottom: 15px;
}
/* Descendant Selector */
.content p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<!-- Element + ID Selector -->
<h1 id="main-heading">CSS All Selectors Example</h1>
<!-- Element + Class -->
<h2 class="highlight">This is a highlighted subheading</h2>
<!-- Grouped Element -->
<h3>This is another subheading</h3>
<!-- Descendant Selector -->
<div class="content">
<p>This paragraph is inside a div with class "content".</p>
<p class="highlight">This is a green paragraph with yellow background.</p>
</div>
<!-- Normal Paragraph outside content -->
<p>This paragraph is outside the .content div.</p>
</body>
</html>
Request
अगर आपको यह article useful या interesting लगा हो, तो please इसे अपने dosto aur family ke साथ जरूर share करें। आपका एक छोटा सा कदम हमें और अच्छा content बनाने के लिए motivate करता है। Thank you!
ध्यान दें कि इस page पर आपको कुछ ads भी देखने को मिल सकते हैं। इसके लिए हम आपसे माफी चाहते हैं। हम इस content को तैयार करने में काफी मेहनत और time लगाते हैं, ताकि आपको valuable जानकारी मिल सके। इन्हीं ads की मदद से हम ये काम continue कर पाते हैं।
आपके support और understanding के लिए दिल से धन्यवाद।
