CSS Selectors in Hindi

CSS In Hindi – CSS Selectors in Hindi

CSS

Introduction To CSS Selectors In Hindi : Css Mai Selector Ka Bahut Hi Important Role Hota Hai | Kyoki Bina Selector Ke Internal Css Ya External Css Nhi Likh Sakte Hai | Jab Bhi Ham Internal css ya external css likhte hai to kisi na Kisi Tag Ke Upper hi Css Likhte hai Ya Fir Apply Karte Hai |

  • CSS Selectors in Hindi
  • Introduction To CSS Selectors In Hindi
  • What is CSS Selector in Hindi?
  • Different Types of CSS Selectors in Hindi
  • More Advance CSS Selector in Hindi

CSS Selector Kiya Hai – What is CSS Selector in Hindi?

CSS Selectors Ka Istemal Ham Content ko Select Karne Ke Liye Karte Hai Hame Jis Bhi Content ko CSS ki Help se Style Dena Hota Hai Usko Ham CSS Selectors Ki Help Se Ham Select Kar Sakte Hai Or Aapne Hisab se Design Kar Sakte Hai | Css Selectors Ko Ham ID , Class , Type Or Attributes ke Anushar Select Karte Hai |

Jab Bhi Internal Css Ya External css Likhte Hai to Ham Selector ka istemal karte hai browser ko yah batane ke liye ki kis tag par css apply karna hai.

Internal css ya external css waise 2 type se likhe jate hai | lekin dono mai likha gaya css syntax same hi rahega lekin dono ka kaam alag-alag rahega |

CSS Selectors in Hindi

CSS In Hindi - CSS Selectors in Hindi

Css Rule Hamesha Selector se Start Hota Hai Joki Yah Batata hai ki ham kis html element ami style appy karenge. Upper Image Mai Example Diya Gaya Hai Jisme Ham element mai Kuch Rule Apply Kar Rahe Hai |

Selector Ke Bad Curly Braces Mai Ham Property Set Karte Hai Jo element ke Presentation ko change kar degi |

Syntax

selector { property : Value }

Different Types Of CSS Selectors In Hindi

Css Selectors Ko Web Master Aapne Hisab Se Istemal Karta Hai | Css Mai Waise Bahut Types ke Selectors Hote Hai , Jinse Web masters Ko Flexibility Milti Hai.

Maine Niche Aapko Css Selectors Kitne types ke hote Hai or Css Selectors kaise istemal karte hai ? ke bare Mai bataya ja rha hai |

1. The Type or Element Selectors

Yah Ek Particular HTML Element hi hota hai. Ise Type Selector Bhi Kaha Jata Hai. Isme Aap HTML ELement Ko Select Bana kar CSS rule Declare karte hai. Is Type Ke Selectors Ka Name usi HTML Tag Ka Name Hota Hai | Jis Tag par css apply karna chahte hai |

Example :

p {
color:red;
}

2.The Universal Selectors

Universal Selector Mai Define Ki Gayi Style Sabhi HTML Par Lagu Ho Jati Hai Tabhi Ise Universal Selectors Ke Name se Jana Jata Hai. Means Ki Vo Elements Bhi Isse Style Ho Jata Hai Jisko Design Nhi Kiya Gaya Ho | Universal Selectors Ko Ham Airstrike (*) se represent Karte Hai |

Example:

*{
  color :red;
}

3. The Class Selectors

HTML Mai Har Ek Tag Ek Class Attribute Define Karta hai | Or Isi Class Attribute ke Duvara HTML ke Kisi Bhi Tag Par Css Apply Kar Sakte Hai | Lekin Jab Ham Kisi Tag Ka Class Define Karte Hai to css Likhne ke liye Sabse Pahle ( . dot ) type karna Padta hai | uske bad Hame Us Attribute ka name type karna padta hai Jise Ham Class Attribute mai define kiye hai |

Example 1:

.h1{
  background : red;
}

Example 2:

<!DOCTYPE html>
<html>
<head>

       <style>
         .h1 { background: red; }
       </style>

</head>
<body>


<h1 class="h1">This is Class H1 </h1>

</body>

Agar Aapko Abhi Bhi Kuch Problem Hai to Aap Niche Diye Image Ko Dekh kar Understand Kar Skate Hai |

CSS In Hindi - CSS Selectors in Hindi

4. The ID Selectors

Yah Class Ki Tarah Hi Hota Hai Isme Bas Itna Differnece Hota Hai Ki ham Ise Define Karte Time .(dot) ki Jagah # (hash) character Ka Istemal Karte Hai. Call Karte Time Tag Mai ID Attribute Istemal Karte Hai |

Ek ID Selector ko Ham Sirf Ek Element ke Liye hi Istemal kar Sakte Hai | Sare ID Unique Tag par hi apply hote hai | Waise Iska Istemal Ham jyadatar layout banante time karte hai |

Example 1:

#idname {
color:orange;
}

Example 2:

<!DOCTYPE html>
<html>
<head>

       <style>
         #h1 { background: red; }
       </style>

</head>
<body>


<h1 id="h1">This is ID H1 </h1>

</body>

5. The Attribute Selectors

Agar Aap Chahe to HTML Tags Attribute Ke Duvara Bhi CSS apply Kar Sakte Hai | In Selectors ka istemal form tag ke liya kiya jata hai |

Example 1:

<style>
img[alt="img1"]{
width:600px;
height:300px;
}
</style>

Example 2:

<html>
	<head>
		<style>
			img[alt="img1"]
			{
         		width:600px;
          		height:300px;
          	}
          </style>
	</head>
	<body>
		<img src="img1">
	</body>
</html>

6. Descendant Selectors or Sub-selectors

Aap CSS Rule Ko Ek Element Ke Bhitar Define Kisi Or Element Par Bhi Apply Kar Sakte Hai.Isi ko Descendant Selector Ke Duvara Define Kiya Jata Hai. Ise Sub-selector Bhi kahte Hai. Iske Liye Pahle Parent Selector ko Likha Jata Hai. Fir Iske Bhitar Define Child Element Ko Ek Space Dekar Likha Jata Hai. Fir Css Rule Ko Declare Kiya Jata Hi |

Example 1:

<style>
		p b {
              color : red;
			}	
</style>

Example 2:

<html>

  <head>
    <style>
		p b {
              color : red;
			}	
	</style>
  </head>

  <body>
    <p>We are learning <b>CSS in Hindi language</b></p>
    <b> CSS is the most powerful language.</b>

  </body>

</html>

7. Group Selectors

Agar Aap Chahe to ek se jayada tags par ek sath hi css apply kar sakte hai | inhe ham group selector bhi kahte hai |

Example 1:

h1, p, header, footer{
color:red;
}

8. Adjacent Sibling Selector

Jab Kisi Ek Specific Element Ke Just Bad Aane Wale Dusre Element Mai Css Rule Dalna Ho to Adjacent Sibling Selector Ki Jarurat Padti Hai |

Example Mai Dekhe , Hamne Selector Mai h1+h1 liya hai jiska matlab hai h1 element ke just bad aane wala h1 tag, yah code second or third aane wale par kaam karenga first wale mai yah set nhi hoga |

Example :-

<html>

  <head>
    <style>
		h1+h1{color:silver;}
	</style>
  </head>

  <body>
<h1> This is Heading one.</h1>
<h1> This is Heading  two.</h1>
<h1> This is Heading  three.</h1> 

  </body>

</html>

More Advance CSS Selector in Hindi

Maine Aapko Jitne Bhi CSS Mai Selector Istemal Hone Wale Hai Maine Unki Niche List De di Hai Agar Aap Unko Bhi Learn Karna Chahte Hai to Aap Hamari Website ke home page pe jakar search kar sakte hai |

SelectorExample
.class.intro
.class1.class2.name1.name2
.class1 .class2.name1 .name2
#id#firstname
**
elementp
element.classp.intro
element,elementdiv, p
element elementdiv p
element>elementdiv > p
element+elementdiv + p
element1~element2p ~ ul
[attribute][target]
[attribute=value][target=_blank]
[attribute~=value][title~=flower]
[attribute|=value][lang|=en]
[attribute^=value]a[href^=”https”]
[attribute$=value]a[href$=”.pdf”]
[attribute*=value]a[href*=”w3schools”]
:activea:active
::afterp::after
::beforep::before
:checkedinput:checked
:defaultinput:default
:disabledinput:disabled
:emptyp:empty
:enabledinput:enabled
:first-childp:first-child
::first-letterp::first-letter
::first-linep::first-line
:first-of-typep:first-of-type
:focusinput:focus
:hovera:hover
:in-rangeinput:in-range
:indeterminateinput:indeterminate
:invalidinput:invalid
:lang(language)p:lang(it)
:last-childp:last-child
:last-of-typep:last-of-type
:linka:link
:not(selector):not(p)
:nth-child(n)p:nth-child(2)
:nth-last-child(n)p:nth-last-child(2)
:nth-last-of-type(n)p:nth-last-of-type(2)
:nth-of-type(n)p:nth-of-type(2)
:only-of-typep:only-of-type
:only-childp:only-child
:optionalinput:optional
:out-of-rangeinput:out-of-range
::placeholderinput::placeholder
:read-onlyinput:read-only
:read-writeinput:read-write
:requiredinput:required
:root:root
::selection::selection
:target#news:target
:validinput:valid
:visiteda:visited

Leave a Reply

Your email address will not be published. Required fields are marked *