CSS Selectors Kya Hai ? | CSS Selectors In Hindi ? |

0
330
css selector
css selector

इस 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 करें )

इन्हें भी देखें –

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 :

ELEMENT SELECTOR
CSS ELEMENT SELECTOR

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 का नाम एक संख्या के साथ शुरू नहीं किया जा सकता ।

ID SELECTOR
ID SELECTOR

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 :

CLASS SELECTOR
CLASS SELECTOR

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 :

universal selector
UNIVERSAL SELECTOR

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 :

GROUPING SELECTOE
grouping-selector

All CSS Simple Selectors

SelectorExampledescription
element.classPSelects only <p> elements
.class.leftSelects all elements with class=”left”
#id#para1Selects the element with id=”para1″
**Selects all elements

आपने क्या जाना ?

इस लेख के जरिये आपने जाना कि CSS क्या है और CSS Selector क्या होते है , हमने आपको with example देके समझाने की कोशिश की है | उम्मीद है यह लेख आपके लिए helpful रहा होगा । अगर आपको मन में CSS से Related किसी भी तरह के कोई भी question है तो आप हमें नीचे comment कर पूछ सकते है।

LEAVE A REPLY

Please enter your comment!
Please enter your name here