Css Selectors

Css Selectors

Selector एक pattern है जिसका use Html element को select करने के लिए किया जाता है जिस पर css rules को apply किया जाना है selector के साथ match होने वाले elemennts को निर्धारित करने के लिए selectors का use एक condition या Css rules के रूप मे किया जा सकता है
Css rule दो part मे divide रहती है

1. Selectors
2. Declaration

Type off Selectors

1. The universal selector
2. The Type selector
3. The class selector
4. The id selector
5. The child selector
6. The descendant selector
7. The adjacent selector
8. The attribute selector

1. The universal selector
Universal selector Html document मे present सभी elements को select करने के लिए use किया जाता है इस selector का use हम html या xHtml document के सभी elements पर same rule apply करने के कर सकते है universal selector को *(asterisk symbol) से Represent किया जाता है
इसका syntax निम्न है
Syntax

*
{
declaration codes
}

Ex

*
{

Margin:0;
Padding:0;
}

यह css कोड  Html या xHtml document के उन  सभी elements जिन पर css rules apply होते है का margin व padding 0 set कर देगा।

2. The Type selector
Type selector का use किसी particular Html element या उन सभी html या xhtml की list जिन पर एक समान css rules को apply करना हो के लिए css rules को define करने के लिए  किया जाता है Type selector का एक फायदा यह है की किसी एक बार type selector का use करने पर हम अपने एक web page मे उस html element को जितनी बार उस करेगे उसे हर बार एक ही style मे show किया जायेगा अर्थात हमे एक ही element के लिए बार बार एक ही प्रकार की style डेफिन करने की आवश्यकता नही होती साथ ही हम उन सभी html element को जिन्हे एक ही style मे रखना है के लिए भी एक बार मे ही style define कर सकते है
इसे हम निम्न syntax से समझ सकते है।

Syntax 1-

Element
               {
                
               Property1:value;
               Property2:value;
               Property3:value;
              .
              .
              .
              PropertyN:value;
                }

Syntax2-

Syntax 1-

Element1, Element2, Element3...... ElementN
               {
                
               Property1:value;
               Property2:value;
               Property3:value;
              .
              .
              .
              PropertyN:value;
                }
यहा element के रूप मे html tag का नाम use करेगे।

For ex

यदि हमे h1 hading के लिए Html style define करनी है तब हम इसे निम्न प्रकार से use करेगे।

Ex
             H1
                  {
                    Color:red;
                    Font-size:12px
                  }

इस code का use करने पर html डॉक्यूमेंट मे जहा जहा h1 हेडिंग का use किया जायेगा उसका output मे text color red व font size 12 px होगी

इसी प्रकार हम एक साथ एक से अधिक element के लिए  भी एक ही बार मे एक समान style set कर सकते है

For ex

H1, H2, h3, p
                  {
                    Font-Family:sans-serif
                    Font-size:14px
                  }

इस code का use करने पर html डॉक्यूमेंट मे जहा जहा H1, H2, h3, p  का use किया जायेगा उसका output मे font family sans-serif व font size 14px होगी

3. The class selector
Class selector उन html element को select करता है जिन्हे class attribute की समान value के साथ specify किया जाता है

इसे दो प्रकार से किया जाता है

यहा class name के पहले period (.) का use किया जाता है

Syntax 1-

. Class_name
                        {
                           Property1:value;
                           Property2:value;
                           Property3:value;
                          .
                          .
                          .
                          PropertyN:value;
                        }

Ex

               . Intro
                        {
                           Color:red;
                        }
इस code का use करने पर उन सभी html element जिनकी class attribute की value intro होगा उन सभी का text color red होगा।

Syntax 2

Element . Class_name
                        {
                           Property1:value;
                           Property2:value;
                           Property3:value;
                          .
                          .
                          .
                          PropertyN:value;
                        }

Ex
        H1. Intro
                        {
                           Color:blue;
                           Font-size:12px;
                         }

इस code का use करने पर उन सभी html h1 heading जिनकी class attribute की value intro होगा उन सभी का text color blue और font size 12px होगा।
इसका use करने का फायदा यह है की हम अपनी आवश्यकतानुसार elements को style कर सकते है

इसके लिए html code निम्न प्रकार से लिखा जायेगा।
Ex- <h 1 class="intro">introduction</h1>

4. The id selector
Id selector उन सभी html element को select करता है जिन्हे Id attribute की समान value के साथ specify किया जाता है
Id attribute का use कर हम सभी html element को unique id provide कर सकते है जिसे उसे uniquely पहचान जा सके।

यहा हमे Id name के पहले # का use करना होता है

Syntax
                  #Id
                        {
                           Property1:value;
                           Property2:value;
                           Property3:value;
                          .
                          .
                          .
                          PropertyN:value;
                        }

Ex
                     #para
                        {
                           Color:blue;
                           Font-size:12px;
                         }

इसके लिए html code निम्न प्रकार use करेगे

Ex -<p i d="para ">this is my paragraph</p>

5. The child selector

Child selector उन सभी element को select कर लेता है जो specify किये गए element के   immediate children होंगे और उन पर css rules apply करेगा जो भी declaration section मे declare किये गए होंगे। 

immediate children से मतलब है ऐसे element जो दिये गए element के अंदर declare किये गए हो अगर किसी child के अंदर कोई और element डेलारे किया गया हो तो वह चिल्ड element तो होगा लेकिन immediate child नही होगा उस हम Descendant कह सकते है

Child selector मे >(gt) symbol को Combinator के रूप मे use किया जाता है

Combinator वह symbol(<,>, + etc) होते है जो दो elements के बीच relationship को शो करते है

इसका syntax निम्न है

Syntax

               Element>child element

               {

                   Declaration code

               }

Ex  

                Div>p

               {

                   Backgroun-color:red;

               }

यह p div का child element  है अर्थात p को इस div के अंदर declare किया गया है इस code को use करने पर जितने भी p child होंगे इस div मे उन सभी का backgroun color red होगा

इसे इस program की मदद से समझ सकते है। 

Program -

<html>

<head>

<style>

div > p {

  background-color: yellow;

}

</style>

</head>

<body>

<div>

  <p>Paragraph 1 in the div.</p>

  <p>Paragraph 2 in the div.</p>

  <section><p>Paragraph 3 in the div.</p></section> <!-- not Child but Descendant -->

  <p>Paragraph 4 in the div.</p>

</div>

<p>Paragraph 5. Not in a div.</p>

<p>Paragraph 6. Not in a div.</p>

</body>

</html>

6. The descendant selector

Descendant element वह element होता है जो किसी अन्य element के अंदर nested किया गया होता है

Descendant selector उन सभी element को select कर लेता है जो specify किये गए element के Descendant होंगे और उन पर css rules apply करेगा जो भी declaration section मे declare किये गए होंगे। 

Descendant selector मे white space को Combinator के रूप मे use किया जाता है

Combinator वह symbol(<,>, + etc) होते है जो दो elements के बीच relationship को शो करते है

इसका syntax निम्न है

Syntax

               Element  child element

               {

                   Declaration code

               }

Ex  

                Div  p

               {

                   Backgroun-color:red;

               }

यह p div का Descendant element  है अर्थात p को इस div के अंदर declare किया गया है इस code को use करने पर जितने भी p child होंगे इस div मे उन सभी का backgroun color red होगा

इसे इस program की मदद से समझ सकते है। 

Program -

<html>

<head>

<style>

div > p {

  background-color: yellow;

}

</style>

</head>

<body>

<div>

  <p>Paragraph 1 in the div.</p>

  <p>Paragraph 2 in the div.</p>

  <section><p>Paragraph 3 in the div.</p></section> <!-- not Child but Descendant -->

  

</div>

</body>

</html>

यह पर paragraph 1,paragraph 2 और paragraph 3 div के descendant element है 

7. The adjacent sibling selector

Adjacent sibling selector उन सभी element को select कर लेता है जो specify किये गए element के adjacent sibling होंगे और उन पर css rules apply करेगा जो भी declaration section मे declare किये गए होंगे।

Sibling element के same parent एलीमें होते है और adjacent का मतलब होता है immediately अर्थात ऐसे sibling element जो किसी element के immediate sibling होते है उन्हे adjacent sibling कहते है

Adjacent sibling selector मे + symbol को Combinator के रूप मे use किया जाता है

Syntax

               Element + adjacent sibling element

               {

                   Declaration code

               }

Ex  

                Div + p

               {

                   Backgroun-color:red;

               }

इसे निम्न program की मदद से समझ सकते हौ

<html>

<head>

<style>

div + p {

  background-color: yellow;

}

</style>

</head>

<body>

<H1>Heading</H1>

<p>The selector above matches this paragraph</p>

<p>The selector above does not matches this paragraph</p>

</body>

</html>

यह पहला paragraph h1 का adjacent sibling है इसलिए इस पर style को apply कर दिया जायेगा लेकिन दूसरे paragraph पर नही क्योकि दूसरा paragraph h1 का sibling तो है लेकिन adjacent sibling नही अर्थात immidiate sibling नही है

8. The attribute selector
हम html tag के attribute का use कर भी style को apply कर सकते है इसके लिए attribute selector का use कर सकते है

Ex -a[href=" Http://www.google.com/]

         {

            Font-weight:bold;

          }

         All CSS Attribute Selector