CSS Selector ‘+’ and ‘~’

Let’s talk about css selector ‘+’ and ‘~’. ;)

<li> is tag selector. So all <li> are applied css style. It is easy, isn’t it? :)

X + Y: Adjacent selector

It will only select the first element that is immediately preceded by the former selector.

In this case, only the third <li> after class=“list-item” will be applied css style.

X ~ Y: Sibling combinator

‘~’ is similar to '+’. It will select, referring to our example above, any all<li>elements, as long as they follow a .list-item.

So how about this example?

There’s nothing selected. Because .list-item is next to <p>, not <li>.

You can learn more selector using below the CSS Diner game.

CSS Diner

reference link