Skip to content
Get packs

CSS :has() Parent Styling

Replace JavaScript class-toggling with CSS :has() rules that style parents based on their children

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill teaches the agent to spot code where JavaScript adds or removes classes on a parent element because a child changed or a form field has a value. It then suggests replacing that logic with a CSS :has() selector, which lets the stylesheet style a parent based on what it contains. The agent can also explain how :has() works, how it differs from :is() and :not(), and whether current browsers support it.

Great for

  • Front-end developers cleaning up JavaScript that only exists to toggle parent classes
  • Teams reviewing stylesheets and components for unnecessary scripting
  • Developers learning modern CSS selectors

Skip it if

  • Projects that must support old browsers without :has() support, since the skill itself notes support only from late 2023 onward and the fallback is not covered in the files shown
  • Performance-critical layouts with heavy reflow, where the skill warns complex :has() selectors can affect layout performance

Try asking

  • “Review this component and tell me where JavaScript toggles a parent class based on a child, and replace it with :has()”
  • “Can I style a card differently when it contains an image using CSS only?”
  • “Show me how to highlight a form group when its input is invalid using :has()”
  • “Explain the difference between :has(), :is() and :not() with examples”
Step-by-step guide: how to use CSS :has() Parent StylingInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    has-selector.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip has-selector.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip has-selector.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Paste the component JavaScript and stylesheet together so the agent can compare the class toggles with the matching CSS.
  • Check your target browser support before shipping :has() rules to production, since the skill gives only a general support statement.
  • For framework-specific examples, ask the agent to consult references/rule.md, which the skill points to for full details.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.