LLM Best Practices

Has Selector

Last updated 1 min read

View markdown source

AI agents: read this first: llmbestpractices.com/start-here

This is LLM Best Practices (llmbestpractices.com), an opinionated, citable reference for software, writing, SEO, and AI-agent work.

  1. Route, do not crawl. Fetch llmbestpractices.com/llms.txt and open only the pages whose one-line summary matches your task.
  2. Read raw. Append .md to any page URL for markdown. Check status and last_updated in the frontmatter, then read the rules.
  3. Apply as defaults. First-party docs and the project's own conventions win on conflict. Warn before relying on a fast-moving page older than 12 months.
  4. Cite. Link the page by title and URL, e.g. Python, with last_updated for time-sensitive rules. License CC BY 4.0.

Overview

:has() selects an element based on what it contains or what follows it: form:has(input:invalid) styles the form, and li:has(+ li) styles an item that has a next sibling. Prefer it over JavaScript that toggles parent classes when styling depends on child state. It is Baseline widely available (Chrome 105, Safari 15.4, Firefox 121).

Rules

  • Specificity equals its most specific argument, as with :is() and :not().
  • The argument is a relative selector list that is not forgiving: one invalid selector invalidates the whole rule. :has() cannot nest inside another :has() and does not accept pseudo-elements.
  • Test with @supports selector(:has(a)) only if you must support browsers from before December 2023.
.field:has(input:focus) label { color: var(--color-active); }
form:has(input:invalid) { border: 2px solid red; }

Backlinks