डाउनलोड पी.डी.एफ. ई-बुक्स
CSS - Combinators and Multiples

CSS में अलग-अलग Situations पर Element को style दी जाती है | इसके लिए Combinators का इस्तेमाल किया जाता है | दो Selectors के बीच में Combinators का इस्तेमाल किया जाता है |

निचे CSS Combinators दिए गए है |

  • Selector1    Selector2(Descendant Combinator(Space))
  • Selector1 + Selector2(Adjacent Sibling Combinator)
  • Selector1 > Selector2(Child Combinator)
  • Selector1 ~ Selector2(General Sibling Combinator)

Know More


Example for Descendant Combinator(Space)

Example पर Parent Element(<div>) के सभी Descendant Elements(<p>) को background color 'red' दिया गया है |

<style>
div p{
 background-color : red;
}
</style>

<div>
<p>1st Child of &lt;div></p>
<span>2nd Child of <div>
<p>1st Child of &lt;span> and 1st Grand-Child of &lt;div></p>
</span>
<p>3rd Child of &lt;div></p>
</div>

<p>1st Sibling of &lt;div>(Adjacent)</p>
<p>2nd Sibling of &lt;div> and 1st Sibling of &lt;p></p>
<p>3rd Sibling of &lt;div> and 2nd Sibling of &lt;p></p>
Output :

1st Child of <div>

2nd Child of <div>

1st Child of <span>

3rd Child of <div>

1st Sibling of <div>(Adjacent)

2nd Sibling of <div> and 1st Sibling of <p>

3rd Sibling of <div> and 2nd Sibling of <p>


Example for Child Combinator(>)

Example पर Parent Element(<div>) के सभी Child Elements(<p>) को background color 'red' दिया गया है |

<style>
div > p{
 background-color : red;
}
</style>

<div>
<p>1st Child of &lt;div></p>
<span>2nd Child of <div>
<p>1st Child of &lt;span> and 1st Grand-Child of &lt;div></p>
</span>
<p>3rd Child of &lt;div></p>
</div>

<p>1st Sibling of &lt;div>(Adjacent)</p>
<p>2nd Sibling of &lt;div> and 1st Sibling of &lt;p></p>
<p>3rd Sibling of &lt;div> and 2nd Sibling of &lt;p></p>
Output :

1st Child of <div>

2nd Child of <div>

1st Child of <span>

3rd Child of <div>

1st Sibling of <div>(Adjacent)

2nd Sibling of <div> and 1st Sibling of <p>

3rd Sibling of <div> and 2nd Sibling of <p>


Example for Adjacent Sibling Combinator(+)

Example पर Parent Element(<div>) के Adjacent Sibling Element(<p>) को background color 'red' दिया गया है |

<style>
div + p{
 background-color : red;
}
</style>

<div>
<p>1st Child of &lt;div></p>
<span>2nd Child of <div>
<p>1st Child of &lt;span> and 1st Grand-Child of &lt;div></p>
</span>
<p>3rd Child of &lt;div></p>
</div>

<p>1st Sibling of &lt;div>(Adjacent)</p>
<p>2nd Sibling of &lt;div> and 1st Sibling of &lt;p></p>
<p>3rd Sibling of &lt;div> and 2nd Sibling of &lt;p></p>
Output :

1st Child of <div>

2nd Child of <div>

1st Child of <span>

3rd Child of <div>

1st Sibling of <div>(Adjacent)

2nd Sibling of <div> and 1st Sibling of <p>

3rd Sibling of <div> and 2nd Sibling of <p>


Example for Sibling Combinator(~)

Example पर Parent Element(<div>) के सभी Sibling Elements(<p>) को background color 'red' दिया गया है |

<style>
div ~ p{
 background-color : red;
}
</style>

<div>
<p>1st Child of &lt;div></p>
<span>2nd Child of <div>
<p>1st Child of &lt;span> and 1st Grand-Child of &lt;div></p>
</span>
<p>3rd Child of &lt;div></p>
</div>

<p>1st Sibling of &lt;div>(Adjacent)</p>
<p>2nd Sibling of &lt;div> and 1st Sibling of &lt;p></p>
<p>3rd Sibling of &lt;div> and 2nd Sibling of &lt;p></p>
Output :

1st Child of <div>

2nd Child of <div>

1st Child of <span>

3rd Child of <div>

1st Sibling of <div>(Adjacent)

2nd Sibling of <div> and 1st Sibling of <p>

3rd Sibling of <div> and 2nd Sibling of <p>



Multiple Selector(,)


CSS में ,(comma) के द्वारा एक से ज्यादा Selectors के लिए एक ही style को दे सकते है |

<style>
p,h1,.myclass,#myid{
background-color : red;
}
</style>

<p>Paragraph Element</p>
<div class="myclass">Div with myclass class</div>
<h1>Header Element</h1>
<div id="myid">Div with myid id</div>
Output :