Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
CSS :has() matches DOM presence, not visibility
:not(:has(.child)) only fires when the child is removed from the DOM, not when it is hidden with display:none.
Bad example
| 1 | .card:not(:has(.card__media)) { |
| 2 | /* intended: collapse the card when there is no media */ |
| 3 | min-height: unset; |
| 4 | } |
| 5 | /* but .card__media is always rendered and only hidden with display:none, |
| 6 | so :has() still matches and this rule never applies — dead code */ |
Explanation (EN)
:has() finds the child as long as it exists in the DOM, even when it is display:none, so a rule that assumes the child is gone never matches and becomes dead code.
Objašnjenje (HR)
:has() pronalazi dijete sve dok postoji u DOM-u, cak i kad je display:none, pa pravilo koje pretpostavlja da je dijete nestalo nikad ne odgovara i postaje mrtvi kod.
Good example
| 1 | /* Option A: actually remove the child from the DOM when empty, |
| 2 | then :not(:has(.card__media)) will match. |
| 3 | Option B: drive the state explicitly instead of inferring it */ |
| 4 | .card[data-empty='true'] { |
| 5 | min-height: unset; |
| 6 | } |
Explanation (EN)
Either remove the element from the DOM so :has() stops matching, or toggle an explicit state (attribute/class) on the parent so the styling no longer depends on the child being absent.
Objašnjenje (HR)
Ili ukloni element iz DOM-a da :has() prestane odgovarati, ili prebaci eksplicitno stanje (atribut/klasu) na roditelju tako da stiliziranje vise ne ovisi o tome da dijete nedostaje.
Notes (EN)
Same gotcha applies to JS checks like querySelector('.child') — presence is not visibility. When the framework always renders the node, infer state from data rather than from DOM structure.
Bilješke (HR)
Ista zamka vrijedi i za JS provjere poput querySelector('.child') — prisutnost nije vidljivost. Kad framework uvijek renderira cvor, izvedi stanje iz podataka, a ne iz DOM strukture.