liveBook · Manning

Not pseudo-class

As explained in Tiny CSS Projects

The CSS :not() pseudo-class matches elements that do not match any selector in its argument list.

The :not() pseudo-class filters a selector by matching elements that do not match any selector in its argument list. In a summary card, it selects every child except the <h2>, making it possible to hide and later reveal the paragraph and link together. section 5.5 section 5.6

Hide everything except the heading

Use main > section > div > *:not(h2) to target the nonheading content. Set that content to opacity: 0 and move it down with translateY(1rem); then reverse those styles when the card is hovered or contains focused content. The heading remains visible while the paragraph and link animate into view. section 5.5

How Tiny CSS Projects covers it

How deep it goes
Defines selector filtering and applies it in a working animation, stopping short of broader selector details.
Examples
Demonstrates *:not(h2) on summary-card children to hide paragraphs and links while preserving the heading.
What you can do after
Apply it to target every element that does not match a specified selector.
How it connects
Connects :not() with CSS selectors, hover, focus-within, transitions, opacity, and transform.
Cover of Tiny CSS Projects
liveBookmanning.com
Read Tiny CSS Projects on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.