Chrome Devtool Selector

Note that ordering matters in the above selector. Swapping the nesting of the two pseudo-classes would result matching any element which contains anything that’s not a heading element.
section:has(:not(h1, h2, h3, h4, h5, h6))
5 or more children
Make a list of 5 or more children a flat list.
ul:has(:nth-child(n+5)) li {
  display: inline;
Adds semi-colon after each item in a list excepts last one
Add a separator except to the last one.
ul:has(:nth-child(n+5)) li:not(:last-child)::after {
  content: ';';

Discover More
Chrome Devtool Selector
Selector - Logical Pseudo-Class

Logical Pseudo-class are: * :matches * :not * :has * :is that return a boolean value (ie logical). They are predicate expression. Example of a selector when the element has the class fade...

Share this page:
Follow us:
Task Runner