Guide · Agent skill
How to use the CSS :has() Parent Styling agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The has-selector skill is an agent skill that reviews stylesheets and components for JavaScript that toggles a class on a parent element based on a child's state, a form value, or content, and then suggests a CSS :has() rule that can replace that code. This guide explains what the skill does, how to install it, how to ask for it in plain language, and where it fits. By the end you will know when to use it and when to skip it.
CSS :has() Parent Stylingthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the has-selector skill ZIP from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project.
- 3Or upload it in the Claude apps. If you use the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 4Check the files. Confirm the folder contains SKILL.md and references/rule.md.
- 5Ask for a review in plain language. Describe the stylesheet or component you want checked, such as JavaScript that toggles a parent class based on a child.
- 6Test the suggested :has() rule. Apply the suggested selector in a test page and check it in the browsers you support before removing any script.
What the has-selector skill makes the agent do
The skill is described as useful when reviewing stylesheets or components that use JavaScript to toggle classes on parent elements. The agent looks for code where a parent gets a class added or removed because a child changed or a form field has a value. It then suggests replacing that logic with a :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(), what descendant and child combinators mean inside :has(), and whether current browsers support it.
- Finds JavaScript that toggles parent classes based on child state or content
- Proposes a CSS :has() selector to replace that logic
- Explains :has(), :is() and :not(), and browser support
How to install the has-selector skill
Download the ZIP for this skill from this page and unzip it. You can install it in one of two places. For a personal setup, unzip it into ~/.claude/skills/. For a single project, unzip it into the .claude/skills/ folder inside that project.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
After unzipping, the skill folder should contain SKILL.md, which holds the instructions, and references/rule.md, which has more detail and code examples.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
How to trigger the skill with natural requests
You do not need a special command. The skill's description says to use it when reviewing stylesheets or components that toggle classes on parent elements based on child state, form input values, or content presence. Ask for that kind of review in plain language and the agent should load the skill when the request matches.
Name the files or components you want checked. The more specific you are about which code to review, the more useful the result will be.
- Review this component and tell me if the JavaScript that adds a class to the wrapper could be a CSS :has() rule.
- Check my stylesheets for parent styling that depends on JavaScript toggling a class when an input has a value.
- Explain how :has() differs from :is() and :not(), and whether my target browsers support it.
- Look through this form code for scripts that only exist to style the fieldset based on its inputs.
Example: replacing a class toggle with :has()
The reference file gives this pattern for selecting a card that contains an image. Instead of a script that adds a class like has-image to the card when an image is inserted, the stylesheet can target the card directly.
The skill's Fix step is to show the selector that targets the parent when the child condition is met. Check the result against your own markup and browser needs before you remove any script.
.card:has(img) {
display: grid;
grid-template-columns: 200px 1fr;
}What the skill needs, and safety notes
The skill lists no requirements. It does not run scripts and does not use the network, according to the details for this skill. It works by reading and reviewing the code you give it.
Browser support is a real constraint. The skill notes that :has() has baseline support across all major browsers. It does not cover fallbacks for older browsers that lack :has(), so if your project must support them, plan that yourself.
- Requirements: none listed
- Runs scripts: no
- Uses network: no
- Licence: MIT
Tips and limits
Use the skill as a reviewer, not as an automatic rewriter. Read each suggested rule and test it in the browsers you support.
Watch performance in busy layouts. The skill warns that complex :has() selectors in hot reflow paths can affect layout performance, so keep selectors simple where the page updates often.
Not every class toggle can be removed. Logic that needs JavaScript for other reasons, such as data handling, should stay in place even if the styling part moves to CSS.
- Keep :has() selectors as simple as the job allows
- Test in the browsers your users run
- Remove only the JavaScript that existed just to style a parent
What people use it for
- Removing JavaScript that adds a class to a card wrapper when an image is inserted
- Styling a form fieldset based on whether its inputs have values, without a script
- Reviewing a component library for scripts that exist only to toggle parent classes
- Learning how :has() differs from :is() and :not() before using it in a codebase
Frequently asked questions
What is the has-selector skill?
It is an agent skill that helps the agent find JavaScript which toggles classes on parent elements based on child state, form values, or content. It then suggests a CSS :has() rule to replace that logic. It is designed for code review and explanation.
How do I install the has-selector agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload it under Settings → Capabilities → Skills.
Does the has-selector skill require anything else?
The skill lists no requirements. It does not run scripts and does not use the network. It is licensed under MIT.
Which browsers support CSS :has()?
The skill says :has() has baseline support and that all major browsers include it. It does not cover fallbacks for older browsers, so check your own support requirements.
What is the difference between :has(), :is() and :not()?
The :has() pseudo-class selects an element when a matching descendant exists inside it. The skill also explains how :has() differs from :is() and :not(), and how descendant and child combinators work inside :has().
Can :has() replace all JavaScript class toggling?
No. The skill says :has() may replace the JavaScript for many styling cases, not all of them. Keep scripts that handle other logic, and keep selectors simple where layout performance matters.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or reviewer who wants to remove JavaScript that only exists to toggle parent classes, or if you are learning modern CSS selectors. Pick something else if you must support browsers without :has(), since the skill does not cover fallbacks, or if you work on performance-critical layouts where complex :has() selectors could add reflow cost.
Download the skill