CSS Selectors

CSS Selector क्या है?

CSS Selector का उपयोग उस HTML Content या Element को Select करने के लिए किया जाता है, जिस पर हम CSS Style लागू करना चाहते हैं।

CSS Selector HTML Elements को विभिन्न आधारों पर Select कर सकता है, जैसे:

• Tag Name

• Class

• ID

• Attribute आदि।

Selectors प्रत्येक CSS Rule Set का एक महत्वपूर्ण भाग होते हैं।

उदाहरण:

p {
    color: red;
}

यहाँ p एक CSS Selector है, जो सभी <p> Elements को Select करता है।

CSS Selectors के प्रकार

CSS में मुख्य रूप से निम्न प्रकार के Selectors होते हैं:

1. Element या Tag Selector

2. Class Selector

3. ID Selector

4. Simple Selector

5. Group Selector

6. Universal Selector

7. Combinator या Sub Selector

8. Attribute Selector

1. Element या Tag Selector

Element Selector का उपयोग HTML Element को उसके Tag Name के आधार पर Select करने के लिए किया जाता है।

उदाहरण के लिए, यदि हम सभी <p> Elements पर एक जैसी Style लागू करना चाहते हैं, तो p Selector का उपयोग किया जाता है।

Syntax:

p {
    text-align: center;
    color: red;
}

परिणाम:

इस CSS के बाद सभी <p> Elements:

• Red Color में दिखाई देंगे।

• उनका Text Center Aligned होगा।

उदाहरण:

<html>

<head>
    <style>
        p {
            text-align: center;
            color: red;
        }
    </style>
</head>

<body>

    <p>This is paragraph 1.</p>
    <p>This is paragraph 2.</p>

</body>

</html>

यहाँ p एक Element/Tag Selector है।

2. ID Selector

ID Selector का उपयोग किसी एक Specific HTML Element को उसकी Unique id के आधार पर Style करने के लिए किया जाता है।

ID Selector को लिखने के लिए ID Name से पहले Hash Symbol (#) लगाया जाता है।

Syntax:

#idname {
    property: value;
}

उदाहरण:

<html>

<head>

    <title>ID Selector</title>

    <style>
        #main {
            color: green;
            text-align: center;
        }
    </style>

</head>

<body>

    <h1 id="main">This is a heading.</h1>

    <p>This is a normal paragraph.</p>

</body>

</html>

Notes:

• प्रत्येक ID Name एक Page में Unique होना चाहिए।

• ID का उपयोग सामान्यतः किसी Specific या Single Element को Select करने के लिए किया जाता है।

• ID Selector को # Symbol द्वारा पहचाना जाता है।

उदाहरण:

#main {
    color: green;
}

यहाँ #main एक ID Selector है।

3. Class Selector

Class Selector का उपयोग उन HTML Elements को Select करने के लिए किया जाता है जिनमें एक विशेष class attribute दिया गया हो।

Class Selector को लिखने के लिए Class Name से पहले Dot (.) लगाया जाता है।

Syntax:

.classname {
    property: value;
}

उदाहरण:

<html>

<head>

    <title>Class Selector</title>

    <style>
        .highlight {
            color: blue;
            font-size: 20px;
        }
    </style>

</head>

<body>

    <p class="highlight">
        This paragraph is highlighted.
    </p>

    <p>This paragraph is normal.</p>

</body>

</html>

उदाहरण की व्याख्या

<p class="highlight">

यहाँ highlight एक Class Name है।

CSS में:

.highlight {
    color: blue;
    font-size: 20px;
}

यह .highlight Class वाले Element पर Style लागू करेगा।

मुख्य बात:

एक ही Class को कई HTML Elements में इस्तेमाल किया जा सकता है।

4. Group Selector

Group Selector का उपयोग एक ही CSS Style को एक से अधिक HTML Elements पर एक साथ लागू करने के लिए किया जाता है।

Selectors को Comma (,) द्वारा अलग किया जाता है।

Syntax:

selector1, selector2, selector3 {
    property: value;
}

उदाहरण:

<html>

<head>

    <title>Group Selector</title>

    <style>
        h1, h2, p {
            color: orange;
            text-align: center;
        }
    </style>

</head>

<body>

    <h1>This is heading 1</h1>

    <h2>This is heading 2</h2>

    <p>This is a paragraph.</p>

</body>

</html>

उदाहरण की व्याख्या

h1, h2, p {
    color: orange;
    text-align: center;
}

यहाँ h1, h2 और p तीनों Selectors को एक Group में रखा गया है।

इसलिए इन तीनों Elements पर:

• Orange Color

• Center Alignment

लागू होगा।

5. Universal Selector

Universal Selector का उपयोग HTML Document के सभी Elements को Select करने के लिए किया जाता है।

Universal Selector को Asterisk (*) Symbol द्वारा दर्शाया जाता है।

Syntax:

* {
    property: value;
}

उदाहरण:

<html>

<head>

    <title>Universal Selector</title>

    <style>
        * {
            color: brown;
            font-family: Arial;
        }
    </style>

</head>

<body>

    <h1>This is a heading</h1>

    <p>This is a paragraph</p>

</body>

</html>

उदाहरण की व्याख्या

* {
    color: brown;
    font-family: Arial;
}

यहाँ * Universal Selector है।

यह HTML Document के सभी Elements पर दिए गए Styles को लागू करता है।

इस उदाहरण में सभी Elements:

• Brown Color में दिखाई देंगे।

• Arial Font का उपयोग करेंगे।

महत्वपूर्ण Symbols