इस Article में हम आपको CSS Selector kya hai ? – What is CSS Selector in Hindi? Different Types of CSS Selector के बारे में जानेंगे | CSS Selector को समझने से पहले थोड़ा CSS पर भी नज़र डाल लेते है की CSS क्या है ? CSS क्यों use करते है |
CSS क्या है ?
CSS वह भाषा है जिसका उपयोग हम HTML डॉक्यूमेंट को स्टाइल करने के लिए करते हैं। CSS बताता है कि HTML Elements को कैसे प्रदर्शित किया जाना चाहिए। CSS बताता है कि HTML Elements को स्क्रीन (Screen), पेपर (Paper) या अन्य मीडिया में कैसे प्रदर्शित किया जाना है, CSS बहुत काम बचाता है। यह एक साथ कई वेब पेजों के लेआउट को नियंत्रित कर सकता है ।
CSS Selectors kya hai ? ( CSS Selectors In Hindi )
CSS Selectors kya hai : CSS Selectors एक Web Page के लिए बहुत ही Important होते हैं. CSS Selectors के through हम उस Content को Select करते हैं, जिसके लिए हम CSS लिखना चाहते हैं.CSS Selectors का Use हम उन HTML Elements को “खोजने” (या चुनने) के लिए किया जाता है जिन्हें हम स्टाइल करना चाहते हैं।
हम CSS Selectors को पाँच Categories में बाँट सकते हैं :
- Simple selectors ( Elements को ID , Name और Class के आधार पर select करें )
- Combinator selectors ( Elements को तब select करें जब उनके बीच specific relationship हों )
- Pseudo-class selectors (एक निश्चित स्थिति के आधार पर elements का select करें )
- Pseudo-elements selectors ( एक element का एक part select करे और स्टाइल करें )
- Attribute selectors ( किसी attribute या attribute value के आधार पर elements को select करें )
इन्हें भी देखें –
- CSS Kya Hai ? | What is CSS in Hindi | CSS का उपयोग कैसे किया जाता है ?
- Html Tag | Html Tag क्या है ? | Types Of Tags | Tag को कैसे use करें ?
- Webpage kaise banaye ? | Webpage क्या होता है ? | How to Create Webpage ?
- Bootstrap Kya Hai? | What is Bootstrap in Hindi | Features Of Bootstrap
- Web Page kya Hai ? | Types of Web | Web Document in Hindi ?
- HTML क्या है – What is HTML in Hindi? and Features of HTML in Hindi ?
- What is Domain Name ? | Domain Name काम कैसे करता है ?
Selector Example
1. CSS Element Selector
जो हमारा Element Selector होता है वो HTML elements को select करता है उसके नाम के आधार पर |
Here, all <h1> elements will be center-aligned, with a black text color :
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align: center;
color: black;
}
</style>
</head>
<body>
<h1>This is my first web page.</p>
</body>
</html> OUTPUT :
2. CSS Id Selector
Id Selector एक Specific Element को select करने के लिए HTML element की आईडी की विशेषता का उपयोग करता है। ID हमेशा हर एक web पेज में अलग होती है मतलब unique होती है इसलिए id selector का use unique element को select करने के लिए किया जाता है। किसी भी specific element को select करने के लिए उसके साथ (#) character लिखे , उसके बाद element की id का नाम।
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Friends Welcome on my Blog bloomtutorial.com</p>
<p>This paragraph alignment will not be changed.</p>
</body>
</html> OUTPUT
नोट: एक ID का नाम एक संख्या के साथ शुरू नहीं किया जा सकता ।
3. CSS Class Selector
Class selector एक specific class attribute के साथ HTML elements का select करता है। यह एक period character के साथ use किया जाता है . (full stop) के बाद class name.
नोट: एक class का का नाम एक संख्या के साथ शुरू नहीं किया जा सकता ।
<!DOCTYPE html>
<html>
<head>
<style>
.left {
text-align: left;
color: blue;
}
</style>
</head>
<body>
<h1 class="left">Class selector </h1>
<p class="left">Class selector एक specific class attribute के साथ HTML elements का select करता है।</p>
</body>
</html> OUTPUT :
4. CSS Universal Selector
The universal selector (*) एक web page के सारे HTML elements को select करता है|
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: mediumvioletred;
font-size: 20px;
}
</style>
</head>
<body>
<h2>CSS Selector</h2>
<p>The CSS element Selector</p>
<p>The CSS Id Selector</p>
<p>The CSS Class Selector</p>
<p>The CSS Universal Selector</p>
</body>
</html> OUTPUT :
5. CSS Grouping Selector
Grouping Selector का use सभी elements को एक ही style definitions के साथ select करने के लिए किया जाता है। कोड को कम करने के लिए हम Grouping selector का use करते है। Commas का Use grouping में हर एक selector को अलग करने के लिए किया जाता है |
h1,h2,p {
text-align: center;
color: red;
} <!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: green;
}
</style>
</head>
<body>
<h1>Hello friends</h1>
<h2>This is my first web page</h2>
<p>This is a article.</p>
</body>
</html> OUTPUT :
All CSS Simple Selectors
| Selector | Example | description |
| element.class | P | Selects only <p> elements |
| .class | .left | Selects all elements with class=”left” |
| #id | #para1 | Selects the element with id=”para1″ |
| * | * | Selects all elements |
आपने क्या जाना ?
इस लेख के जरिये आपने जाना कि CSS क्या है और CSS Selector क्या होते है , हमने आपको with example देके समझाने की कोशिश की है | उम्मीद है यह लेख आपके लिए helpful रहा होगा । अगर आपको मन में CSS से Related किसी भी तरह के कोई भी question है तो आप हमें नीचे comment कर पूछ सकते है।
