Search code examples
csscss-selectors

Confusion with selectors, div ~ h1 vs div > h1

I am having a problem understanding the div ~ h1, it appears it selects all h1 tags that directly follow a div.

But isn't this what div > h1 actually does ?

It selects all h1 that is a direct child of the div ?

I also came across div + h1 and at first i was confused, but this appears to select only a single element i.e 1 H1 tag that follows a div.

Solution

  • div ~ h1 will select all the h1 following siblings [brothers] (not just the immediate one).

    div + h1 will select only the immediate brother h1 following the div.

    div > h1 will select all the h1 that are direct children of the div.

    div h1 will select all the h1 that are nested in the div (not just direct children).

    all of that, and more can be found here