TheMFB
11/6/2017 - 6:35 PM

CSS Combinators

The descendant selector — (space) — allows you to select an element nested somewhere inside another element (not necessarily a direct descendant; it could be a grandchild, for example) The child selector — > — allows you to select an element that is an immediate child of another element. The adjacent sibling selector — + — allows you to select an element that is an immediate sibling of another element (i.e. right next to it, at the same level in the hierarchy). The general sibling selector — ~ — allows you to select any elements that are siblings of another element (i.e. at the same level in the hierarchy, but not necessarily right next to it).

The code below results in: all text being blue, Heading 1 p's will be yellow The first p under each heading will be CAPS All borders dashed.

main.html
content_copyfile_download
<section>
  <h2>Heading 1</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <div>
    <h2>Heading 2</h2>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
  </div>
</section>
style.css
content_copyfile_download
section p {
  color: blue;
}

section > p {
  background-color: yellow;
}

h2 + p {
  text-transform: uppercase;
}

h2 ~ p {
  border: 1px dashed black;
}