CSS Combinators cheatsheet

css_combinator.md

CSS Combinators

Selector	symbol	example	Description
Descendant	" "	body p	all p tag inside body
Child	>	body > p	all p which is direct child of body
Adjacent sibling	+	p + img	img which is next sibling to p
General Sibling	~	p ~ img	all img which is sibling after p

Descendant

<style>
  .container .inner {
    border: 1px solid red;
  }
</style>

<div class="container">
    <div>
      <div class="inner">hello</div>
    </div>
    <div class="inner">hello</div>
</div>

Child

<style>
  .container > .inner {
  border: 1px solid red;
}
</style>

<div class="container">
    <div>
      <div class="inner">hello</div>
    </div>
    <div class="inner">hello</div>
</div>

Adjacent Sibling

<style>
  .child-2 + p {
   border: 2px solid red;
  }
</style>

<div class="container">
  <p class="child-1">1</p>
  <p class="child-2">2</p>
  <p class="child-3">3</p>
  <p class="child-4">4</p>
</div>

General Sibling

<style>
  .child-2 ~ p {
   border: 2px solid red;
  }
</style>

<div class="container">
  <p class="child-1">1</p>
  <p class="child-2">2</p>
  <p class="child-3">3</p>
  <p class="child-4">4</p>
</div>