Direct descendent vs. Eventual Descendent

E<space>F is eventual descendent E>F is direct descendent

by jshacker

HTML

<div>
  <section>
    <p>I am p; very deep in div. I am (p) eventual descendent of div.</p>
  </section>
  <p>I am p in div. I am (p); direct descendent of div.</p>
</div>
<hr />
<div>
  <div>
    <div>
      <div>
        <div>
          <section>
            <p>
              I am p; very deep in div. I am (p) eventual descendent of div.
            </p>
          </section>
          <p>I am p; very deep in div. I am (p); direct descendent of div.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<hr />
<div>
  <p>I am p in div. I am (p); direct descendent of div.</p>
  <section>
    <p>I am p; very deep in div. I am (p) eventual descendent of div.</p>
  </section>
</div>
<hr />
<div>
  <div>
    <p>I am p in div in div. I am (p); direct descendent of div.</p>
    <section>
      <p>I am p; very deep in div. I am (p) eventual descendent of div.</p>
    </section>
  </div>
</div>
<hr />
<div>
  <div>
    <div>
      <div>
        <div>
          <section>
            <p>
              I am p; very deep in div. I am (p) eventual descendent of div.
            </p>
          </section>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

div p {
  color: red;
  /* Eventual descendents
   * It means p should be in the family line of div.
   * p can be child of div
   * p can be grandchild of div
   * p can be great grand child of div
   */
}

div > p {
  color: blue;
  /* Direct descendent
   * It means p shold be child of div and not grand child.
   */
}

JavaScript

/* Direct Descendent
 * Father > Son
 *
 * HTML: div p <- p is direct descendent of div
 *
 *
 * Eventual Descendent
 * GrandFather GrandSon
 *
 * HTML: div section p
 * 		p is direct descendent of section;
 *		section is direct descendent of div;
 *		p is eventual descendent of div.
 */