What is this weird CSS Syntax?

So I came across this yesterday and I want to share with you. Say you have div container with class of list and inside it are 10 more div each with a class of item,

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  etc..
</div>

with this CSS style:

.list .item:hover + * + * {
   // some styles
}

.

Explanation

we already know that + means the adjacent element, but the asterisk added allows the user to select the adjacent element which also has the same class.

The asterisk (*) character is used to expand the recognizable element types immediately after the hovered item class

This means that in the style specified above, we want to apply the styles to the second adjacent item of the same class (i.e .item). So if there are five adjacent div elements and I hover on the third element, the styles provided will affect the fifth element.

Check out this YouTube video below for a better understanding of how it works: