So I came across this yesterday and I want to share with you. Say you have div container with class... Tagged with webdev, programming, css, javascript.

Roberto Umbelino

Figma

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Learn about an interesting CSS syntax involving the adjacent sibling combinator (+) and the asterisk (*) to select non-immediate adjacent elements of the same class. This allows styles to be applied to specific siblings a few elements away when hovering over a targeted element.

What is this weird CSS Syntax?

Not to be a downer or anything, but to be honest, this is a basic have-to-know usage of css.
And the example is wrong by itself. Never ever use divs for a list. That’s the wrong syntax. You are always supposed to use a <code>&lt;ul&gt;</code> with <code>&lt;li&gt;</code> or a <code>&lt;ol&gt;</code> with <code>&lt;li&gt;</code>. Not only by w3c standards but also — for the sake of accessibility. Screenreaders can not interpret your wrongly used div list.
If you, for no legit reason at all, “have” to use divs for a list, then at least add aria syntax like <code>role=&quot;list&quot;</code> with <code>role=&quot;listitem&quot;</code>. But better to use the standard w3c syntaxes.
<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role" target="_blank" rel="noopener nofollow">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role</a>

Brilliant explanation and example, highly recommended.
The funny thing is that all css selectors share the same specificity because “:has” and “+ *” don’t add up, so it all works because of the order the rules appear in.