CSS Combinators

ancestor descendant { }
parent > child { }
element + adjacent-sibling { }
element ~ general-sibling { }

<style>
.card p {
  color: gray;
}
</style>
<div class="card">
  <p>Nested paragraph</p>
  <div><p>Deeply nested paragraph</p></div>
</div>

<style>
.menu > li {
  color: blue;
}
</style>
<ul class="menu">
  <li>Top-level item</li>
  <li><ul><li>Nested item</li></ul></li>
</ul>

<style>
h2 + p {
  font-weight: bold;
}
</style>
<h2>Heading</h2>
<p>Immediately after heading</p>
<p>Not affected</p>

<style>
h2 ~ p {
  color: green;
}
</style>
<h2>Heading</h2>
<p>Affected sibling</p>
<p>Also affected sibling</p>

<style>
.card > h2 + p {
  color: purple;
}
</style>
<div class="card">
  <h2>Title</h2>
  <p>Styled paragraph</p>
</div>

CSS Pseudo-classes · CSS Pseudo-elements · CSS Opacity · CSS Navigation Bar

1. descendant selectors (space) इस्तेमाल करना जबकि आप सिर्फ direct children को target करना चाहते हैं, जिससे accidental styling leaks होती हैं।
2. यह भूल जाना कि adjacent sibling selectors (+) सिर्फ trigger के ठीक बगल में स्थित single element को match करते हैं।
3. excessively लंबी, fragile compound selector chains design करना जो HTML structure update करने पर आसानी से टूट जाती हैं।

• Combinators HTML family tree structure में target elements की relationships के आधार पर उन्हें select करते हैं।
• space selector सभी descendants को target करता है, जबकि > selector किसी specified parent के सिर्फ direct children को target करता है।
• + selector trigger के ठीक बगल में स्थित single adjacent sibling को target करता है, जबकि ~ selector उसके बाद कहीं भी स्थित सभी sibling elements को target करता है।

Standard CSS combinators (+, >, ~) हर modern web browser द्वारा natively supported हैं।