Difference between descendants and direct children

This is part of the Semicolon&Sons Code Diary - consisting of lessons learned on the job. You're in the CSS-and-design category.

Last Updated: 2021-05-16

I had to do some trial and error in selecting elements on a page because I didn't understand how these two ways to selecting differed:

1 Descendants

Format: x y

  // descendants - i.e. anything el whose id ends with 'result' and is contained 
  // within the `#calculator_result` (at an arbitrary level)
  document.querySelectorAll("#calculator_result [id$=result]")

2. Direct Children

Format: x > y

  // direct children - i.e. anything el whose id ends with 'result' and is
  // IMMEDIATELY under #calculator_result
document.querySelectorAll("#calculator_result > [id$=result]")