27) Combinators.css

1) Overview of Combinators:
We can select an element directly using its class, or id, or tag name. 
But sometimes, we need to select elements based on their relationship with other elements. 
For example, how will we select all paragraphs that are nested inside a div?

HTML:
<div>
  <p>
    This Paragraph will be blue because it is within a div
  </p>
</div>
<p>
  This Paragraph will be black because the style changes don't apply to it.
</p>

CSS:
div > p {
  color: blue;
}

Here, > is a combinator. Notice that the styles were only applied to the p elements within a div.

2.1) Selecting "All Child Elements":
a) When we need to select a particular set of child elements, we use the space character like this:
div a {
  
}
b) Here, div a will select all a elements that are the children of a div element, even when those elements are nested deeper within the div
c) In the example given above, all the div elements' children that are 'a' elements are selected and given an orange color. 
Actually, not children, but descendants are selected. Descendants include children, children's children, and so on...

2.2) Example:
#note p {
  font-size: 0.9em;
  color: darkgray;
}

3) Selecting "Direct Child Elements":
When we need to select only the direct child elements, we use the > character like this:
nav > ul
This will select all ul elements that are direct children of nav. 
It will not select anything else including ul elements that are nested deeper inside the nav!
For that, we need to go deeper!

Example:
HTML:
<nav>
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li id="dropdown">
      <ul>
        <li>
          <a href="#">Blog</a>
        </li>
        <li>
          <a href="#">Twitter</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

CSS:
nav > ul {
  list-style-type: none;
  font-family: Helvetica;
}

nav > ul > li {
  float: left;
  padding-right: 30px;
  color: black;
}

nav > ul > li > a {
  color: midnightblue;
  text-decoration: none;
  border-bottom: 3px solid midnightblue;
  font-weight: 700;
}
/*Notice that the ul and li nested within #dropdown are not affected by the styles. 
This is because the > is only selecting the children who are one level deep.*/

4) Selecting "Immediate Next Element":
When we need to select the immediate next element, we use the + character like this!
syntax: h1 + p {
  
}

Example:
h1 + p {
  font-weight: bold;
  font-size: 1.1em;
  color: green;
}
/*These elements that are children of a common parent and are at the same nested level are called siblings.*/

5) Selecting any Next Element:
a) When we need to select any sibling element that follows a particular element, we use the ~ character to combine two selectors!
h1 ~ p

b) h1 ~ p will select all the p elements after an h1 element within the same parent element. 
This will select all descendant p elements too. 
The p element should be after the h1 element and should be a direct child or a descendant of the parent of the h1 element!

c) Example:
h1 ~ p {
  color: brown;
}