Combinator 1 Example

Example from MDN.

Heading 1

Paragraph 1

Paragraph 2

Heading 2

Paragraph 3

Paragraph 4

Illustrating the basic combinators. We can also test combinators from our JavaScript console using the document.querySelectorAll(...) method.

Try the following:

document.querySelectorAll("section p") for a general descendent selector
document.querySelectorAll("section > p") for a (direct) child selector
document.querySelectorAll("h2 + p") for adjacent sibling selector
document.querySelectorAll("h2 ~ p") for arbitrary sibling selector