CSS Combinators In Hindi – CSS IN Hindi

CSS

CSS Combinators In Hindi – Is Tutorial Me Hamne CSS Combinators Ko With Example Ke Sath Explain Kiya Hai |

Ham Jante Hai Ki Html Elements, Ko Style Dene Ke Liye CSS Selectors Ka Use Kiya Jata Hai |

CSS Combinator Ye Batata Hai Ki Do CSS Selectors Ke Bich Me Kya Relation Hai |

Jab Koi Html Tag Kisi Dusre Tag Ke Andar Hota Hai , Example <div> Ke Andar <p> Tag Ho To <p> Tag Ko Direct Target Nhi Kiya Ja Skta , Ise Target Krne Ke Liye CSS Combinator Ki Jarurat Padti Hai , CSS Combinators CSS Ka Bahut Important Topic Hai Jo Bahut Jyada Kam Me Liya Jata Hai |

Yadi Aapne  HTML Full Course  And CSS Full Course And Python Full Course And PHP Full Course Nhi Read Kiya Hai To Aap Vah Bhi Read Kar Sakte Hai |

CSS Combinators In Hindi

Aapne Dekha Hoga Ki Ham Ek Html Tag Ke Andar Bahut Sare, Other Html Elements Use Kar Sakte Hai, Matalab Ek Selector Ke Andar Bahut Sare Selectors Use Kar Sakte Hai , Aur Inhi Selectors Ko Proper Tarike Se Style Dene Ke Liye CSS Combinators Ka Use Kiya Jata Hai |

CSS Me 4 Types Ke Combinators Ho Skte Hai –

  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
  • general sibling selector (~)

Ab Ek-Ek Kar Ke In 4 Combinators Ko With Example Samajhate Hai |

Descendant Selector In CSS In Hindi

Jab Kisi Tag Ke Andar Aur Bhi Tag Ate Hai To Andar Wale Tag Descendant Kahalate Hai , Example – Div Ke Andar 3 <p> Aur 2 <h4> Hai To Div Ke 5 descendant Hai |

Ab Agar Ham Is Descendant Ko Style Dena Chahte Hai To Ise Select Krne Ke Liye CSS Combinators Ka Descendant Type Use Kiya Jata Hai |

Child Ko Select Karne Ka Tarika – Parent Element > Descendant Element

Example : Is Example Me Ham Ek Div Tag Lete Hai, Uske Andar 3 <p> Tag Lete Hai, Aur 2 <p> Tag Div Ke Bahar Lete Hai, Ab Hme Sirf Div Ke Andar Wale <p> Ko Hi Style Deni Hai

<!DOCTYPE html>
<html>
<head>
<style>
div p {
  background-color: red;
}
</style>
</head>
<body>

<h2>Master Programing CSS Combinators</h2>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
</div>

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

</body>
</html>

Output :

Output Me Hamne Dekha Kese Sirf Div Ke Andar Wale <p> Tag Ko Hi Target Kiya |

Is Tarike Se Aap Descendant Elements Ko Select Kar Skte Hai |

Child Selector (>) In CSS In Hindi

Kisi Html Tag Ke Andar Aur Bhi Tags Ate Hai To Vo Tag Bahar Wale Tag Ke Child Kahalate Hai,Aur Bahar Wala Tag Parent Kahalata Hai , But Agar Child Ke Andar Bhi Tag Aye To Vo Sbse Bahar Wale Tag Ke Grand Child Hote Hai |

Child Ko Select Karne Ka Tarika – Parent Element > Child Element

Example : Ek div Lete Hai Uske Andar 2 <p> Tag Lete Hai Aur Ek <section> Tag Lete Hai ,<section> Ke Andar Fir Ek <p> Lete Hai | Age Ham Sirf <div> Ke Andar Ke Element Ko Hi Style Dena Chahte Hai To Child Selector Ka Use Karna Pdega |

 <!DOCTYPE html>
<html>
<head>
<style>
div > p {
  background-color: red;
}
</style>
</head>
<body>

<h2>Master Programing - Child Selector</h2>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
  <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>

Output :

Hamne Dekha Ki div Ke Child Par Hi Style Hui Hai |

Adjacent Sibling Selector (+) In CSS In Hindi

Adjacent Sibling Selector Ka Use Vha Kiya Jata Hai, Jha Hame Kisi Element Ke Khtm Hote, Ane Wala Only Next Element Par Hi Style Karni Ho |

Adjacent Sibling Ko Select Karne Ka Tarika – Element + Adjacent Sibling Element

Example :

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>Master Programing-Adjacent Sibling Selector</h2>

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

<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

<div>
  <p>Paragraph 5 in the div.</p>
  <p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>

</body>
</html>

Output :

Hamne Dekha Ki Sirf Div Ke Khatm Hone Ke Bad Ane Wale <p> Tag Par Hi Style Add Hui Hai |

General Sibling Selector (~) In CSS In Hindi

General Sibling Selector Ka Use Tab Kiya Jata, Jab Hame Kisi Element Ke Bad Ane Sare Sibling Tag Par Style Deni Ho |

General Sibling Ko Select Karne Ka Tarika – Element ~ Sibling Element

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
  background-color: red;
}
</style>
</head>
<body>

<h2>Master Programing-General Sibling Selector</h2>

<p>Paragraph 1.</p>

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

<p>Paragraph 3.</p>
<p>Paragraph 4.</p>

</body>
</html>

Output :

Hamne Dekha Ki div Ke Bad Ane Wale Sare <p> Par Style Add Ho Gyi |

CSS Combinators Se Related Koi Doubt Ho To Aap Comment Section Me Puchh Skte Hai |

Leave a Reply

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