header:is(.my-header, .blue, .green) {}

Parent teg selector not class or id, that means <header> if it has contain the class my-header or blue or green then <header> will be styled...
example: see style sheet


header :is(h1, h2, h3, .bold) {}

Child teg or class selector that means header if it has inner the class bold or tag h1 or h2 or h3 then header will be..
example: see style sheet


:is(header, main) h3, p {}

Also you can use...
example: see style sheet


a:is(:hover, :focus) {}

styling hover & focus



:is(header, .post-content) :is(h2,h3,a) {}

h2,h3,a will be styled


:where(header, .post-content) :where(h2,h3,a) {}

:where(header, main) h3, p {}

:where & :is is same, only difference between Specificity,
example: see style sheet

main:has(h3) {}

Parent selector. Any <main> that has h3 inside of it then style <main>
example: see style sheet


ul li:has(+ li) {}

Every li has border-bottom without last li


p:not(:has(span)) {}

That Means Every Paragraph does not have a <span> inside of it those are styled

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius ullam soluta asperiores dolore iusto iure?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius ullam soluta asperiores dolore iusto iure?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius ullam soluta asperiores dolore iusto iure?


nav:has(a:hover) a:not(:hover) { opacity: 0.3}

when hover nav item, other items will be dim

Example:

div:has(p:empty) {}

If div has empty paragraph then style the div