Question

Given a list of elements like this:

<ul>
  <li class="favourite"></li>
  <li class="favourite"></li>
  <li class="favourite"></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

I would like to create a gap between the list elements which have .favourite and those which don’t.

Is there a way I can do this with CSS?

Edit
Assume that elements with the class .favourite are always forced to the top of the list.

Answer 1

You can apply a margin to a li that’s not .favourite, that comes right after a li.favourite. You will need to use :not() in conjunction with an adjacent sibling selector, like this:

li.favourite + li:not(.favourite) {
    margin-top: 1em;
}

If it’s not known in your actual markup whether classless elements come first or li.favourite elements come first, and you want to create a gap regardless of the order, extend the selector like this to cover both cases:

li.favourite + li:not(.favourite), li:not(.favourite) + li.favourite {
    margin-top: 1em;
}

Use a left margin instead of a top margin if your list flows horizontally from left to right.