BaselineLab
0Support

Basic and attribute selectors

Build basic and attribute selectors, compare them across three HTML scenarios, and inspect every match and its specificity.

Guide

Ask AI

Basic and attribute selectors

Response generated with openai/gpt-5.4-nano. AI can make mistakes. Always review the result.
Current selectorarticle
Support unknownSpecificity—

Preparing the scenario and its results…

Selects every <article> element in the scenario.

Selector preview

Semantic HTML

Accessible structures for web documents.

CSS Grid guide

Modern layouts with rows and columns.

HTML
<section
  id="component-catalog"
  class="catalog"
  aria-label="Catalog of guides and demos"
>
  <article
    id="featured-card"
    class="card featured"
    data-kind="guide"
    data-tags="css selectors"
    data-code="CSS-BASICS"
    data-file="selectors.pdf"
    data-note="learn-selector-specificity"
    lang="es-MX"
  >
    <h3>CSS selectors guide</h3>
    <p>Types, classes, attributes, and specificity.</p>
  </article>
  <article
    class="card"
    data-kind="demo"
    data-tags="html semantics"
    data-code="HTML-BASICS"
    data-file="semantics.html"
    data-note="semantic-markup"
    lang="en-US"
  >
    <h3>Semantic HTML</h3>
    <p>Accessible structures for web documents.</p>
  </article>
  <article
    class="card"
    data-kind="guide"
    data-tags="css layout"
    data-code="CSS-GRID"
    data-file="grid.pdf"
    data-note="layout-selector-reference"
    lang="es-ES"
  >
    <h3>CSS Grid guide</h3>
    <p>Modern layouts with rows and columns.</p>
  </article>
</section>
CSS
article {
  outline: 3px solid #f97316;
  outline-offset: 3px;
  background-color: color-mix(in oklch, #f97316 16%, transparent);
}

CSS selectors guide

Understand what each selector expresses

Compare what each syntax selects, how it contributes to specificity, and which restrictions are worth remembering before using it.

Back to the playground

How to read an entry

Matching, specificity, and the cascade answer different questions. Keeping them separate avoids attributing effects to a selector that actually depend on declarations or rule order.

(ID, CLASS, TYPE)

Three columns, not a decimal number

ID counts ID selectors, CLASS groups classes, attributes, and pseudo-classes, and TYPE counts types and pseudo-elements. They are compared from left to right.

selector → matches

Matching does not mean winning the cascade

The selector decides which elements enter the rule. Origin, layers, importance, specificity, and order decide which declaration wins.

style="..."

Inline styles are not selectors

A style attribute participates in the cascade with its own priority, but it does not add a fourth column to a selector specificity tuple.

Basic selectors

Select by type, class, or ID, or combine several conditions on the same element.

Universal

*

Represents any element within the context where it is evaluated.

Specificity(0, 0, 0)
Important behavior
  • It contributes no specificity and does not represent text nodes, comments, or pseudo-elements.
  • On its own it selects every element; combined, as in .card *, it selects every element inside each .card.
Selector and HTML examples
SelectorSpecificity(0, 0, 0)
*
HTML
Matches: <section>
  This text is not an element.
Matches:   <span>Matches</span>
</section>
SelectorSpecificity(0, 1, 0)
.card *
HTML
<article class="card">
Matches:   <strong>Matches</strong>
Matches:   <span>Matches</span>
</article>
<p>Does not match</p>
Common conceptual mistakes
  • It should not be called “the slowest selector”: cost depends on the complete rule, DOM, invalidation, and browser.
  • Adding * to a selector does not increase its specificity.
Read the complete definitionOpens in a new tab

Type

E

Selects every element with the given name, such as article.

Specificity(0, 0, 1)
Important behavior
  • Each type selector contributes one unit to the TYPE column.
  • It describes the element name, not its visual role or a class with the same text.
Selector and HTML examples
SelectorSpecificity(0, 0, 1)
article
HTML
Matches: <article>Matches</article>
<section>Does not match</section>
SelectorSpecificity(0, 0, 1)
button
HTML
<nav>
  <a href="#">Does not match</a>
Matches:   <button type="button">Matches</button>
</nav>
Common conceptual mistakes
  • Writing .article would look for a class named article, not <article> elements.
  • Choosing an element only for its appearance can tie CSS to an unnecessarily rigid HTML structure.
Read the complete definitionOpens in a new tab

Class

.class

Selects any element whose class list contains the given identifier.

Specificity(0, 1, 0)
Important behavior
  • A class can be reused on as many elements as necessary.
  • One element can have several space-separated classes; each class selector contributes one unit to CLASS.
Selector and HTML examples
SelectorSpecificity(0, 1, 0)
.featured
HTML
Matches: <article class="featured">Matches</article>
Matches: <p class="featured">Matches</p>
<aside>Does not match</aside>
SelectorSpecificity(0, 1, 0)
.note
HTML
<aside>
Matches:   <p class="note">Matches</p>
  <p>Does not match</p>
</aside>
Common conceptual mistakes
  • Omitting the dot turns the text into a type selector.
  • Matching uses complete class tokens: .card does not match class="card-large".
Read the complete definitionOpens in a new tab

ID

#id

Selects elements whose identifier exactly matches the value written after #.

Specificity(1, 0, 0)
Important behavior
  • In a conforming HTML document, each id value must identify a single element.
  • CSS can match several elements with the same ID in a non-conforming document; the engine does not repair that duplication.
Selector and HTML examples
SelectorSpecificity(1, 0, 0)
#featured-card
HTML
Matches: <article id="featured-card">Matches</article>
<article id="secondary-card">Does not match</article>
SelectorSpecificity(1, 0, 0)
#primary-action
HTML
<form>
Matches:   <button id="primary-action">Matches</button>
  <button>Does not match</button>
</form>
Common conceptual mistakes
  • Assuming the selector always returns one element can hide duplicate-ID errors.
  • Its (1, 0, 0) weight can make a rule harder to override than necessary.
Read the complete definitionOpens in a new tab

Compound

E.class.class

Selects one element that simultaneously satisfies every condition written without combinators.

Specificity(0, 2, 1)
Important behavior
  • article.card.featured requires the article type and both classes on the same element.
  • Specificity adds the contribution of every simple selector in the compound.
Selector and HTML examples
SelectorSpecificity(0, 2, 1)
article.card.featured
HTML
Matches: <article class="card featured">Matches</article>
<article class="card">Does not match</article>
SelectorSpecificity(0, 2, 1)
button.action.primary
HTML
<form>
Matches:   <button class="action primary">Matches</button>
  <a class="action primary">Does not match</a>
  <button class="action">Does not match</button>
</form>
Common conceptual mistakes
  • Adding a space changes the meaning: article .featured would look for a descendant.
  • Reordering the classes does not change specificity or require that order in the class attribute.
Read the complete definitionOpens in a new tab

Attribute presence and value

Distinguish between checking that an attribute exists and requiring its complete value to equal a particular string.

Presence

[attr]

Selects elements that have the given attribute, whatever its value is.

Specificity(0, 1, 0)
Important behavior
  • A present attribute with an empty value still matches [attr].
  • The check uses the attribute represented in the document tree and contributes one unit to CLASS.
Selector and HTML examples
SelectorSpecificity(0, 1, 0)
[data-kind]
HTML
Matches: <article data-kind="">Matches</article>
<article>Does not match</article>
SelectorSpecificity(0, 1, 0)
[disabled]
HTML
<form>
Matches:   <input disabled value="Matches">
  <input value="Does not match">
</form>
Common conceptual mistakes
  • It does not test whether the value is true, non-empty, or useful; it only tests presence.
  • A JavaScript property with the same name does not replace the attribute when it is absent from the DOM.
Read the complete definitionOpens in a new tab

Exact value

[attr="value"]

Selects elements whose complete attribute value is exactly the given string.

Specificity(0, 1, 0)
Important behavior
  • The = operator does not split lists or search inside the value.
  • Letter-case behavior depends on the attribute and language unless i or s is added.
Selector and HTML examples
SelectorSpecificity(0, 1, 0)
[data-kind="guide"]
HTML
Matches: <article data-kind="guide">Matches</article>
<article data-kind="guide-draft">Does not match</article>
SelectorSpecificity(0, 1, 0)
[data-state="open"]
HTML
<dialog>
Matches:   <button data-state="open">Matches</button>
  <button data-state="opening">Does not match</button>
</dialog>
Common conceptual mistakes
  • [data-kind="guide"] does not match data-kind="guide-draft".
  • = should not be used when the attribute is a word list and only one word is required.
Read the complete definitionOpens in a new tab

Matching operators

Each operator interprets the attribute value differently: word, hyphenated prefix, beginning, ending, or substring.

Word

[attr~="word"]

Finds a complete word in a list of values separated by CSS whitespace.

Specificity(0, 1, 0)
Important behavior
  • The ~= operator suits multi-value attributes such as class or data-tags.
  • The searched word must be bounded by whitespace; this is not a substring search.
Selector and HTML examples
SelectorSpecificity(0, 1, 0)
[data-tags~="css"]
HTML
Matches: <article data-tags="css selectors">Matches</article>
<article data-tags="scss">Does not match</article>
SelectorSpecificity(0, 1, 0)
[rel~="external"]
HTML
<nav>
Matches:   <a rel="help external">Matches</a>
  <a rel="external-link">Does not match</a>
</nav>
Common conceptual mistakes
  • [data-tags~="css"] does not match the scss token.
  • Commas are not separators for this operator: it reads a space-separated list.
Read the complete definitionOpens in a new tab

Language or prefix

[attr|="prefix"]

Matches the exact value or that value immediately followed by a hyphen.

Specificity(0, 1, 0)
Important behavior
  • The |= operator targets structured prefixes, especially language tags such as es and es-MX.
  • It does not match any text with the same beginning: the following character must be a hyphen.
Selector and HTML examples
SelectorSpecificity(0, 1, 0)
[lang|="es"]
HTML
Matches: <article lang="es">Matches</article>
Matches: <article lang="es-MX">Matches</article>
<article lang="especial">Does not match</article>
SelectorSpecificity(0, 1, 0)
[data-locale|="pt"]
HTML
<section>
Matches:   <p data-locale="pt-BR">Matches</p>
  <p data-locale="pt_BR">Does not match</p>
</section>
Common conceptual mistakes
  • [lang|="es"] is not equivalent to [lang^="es"].
  • Values such as es_MX or especial do not match because they lack the required separator.
Read the complete definitionOpens in a new tab

Prefix

[attr^="prefix"]

Selects attribute values that begin exactly with the given string.

Specificity(0, 1, 0)
Important behavior
  • The ^= operator compares from the first character of the value.
  • An empty comparison string does not represent any element.
Selector and HTML examples
SelectorSpecificity(0, 1, 0)
[data-code^="CSS"]
HTML
Matches: <article data-code="CSS-GRID">Matches</article>
<article data-code="HTML-CSS">Does not match</article>
SelectorSpecificity(0, 1, 0)
[href^="https://"]
HTML
<nav>
Matches:   <a href="https://example.com">Matches</a>
  <a href="/docs/css">Does not match</a>
</nav>
Common conceptual mistakes
  • It does not find the prefix in the middle; use *= for that.
  • It is not case-insensitive by itself.
Read the complete definitionOpens in a new tab

Suffix

[attr$="suffix"]

Selects attribute values that end exactly with the given string.

Specificity(0, 1, 0)
Important behavior
  • The $= operator is useful for known extensions or endings.
  • An empty comparison string does not represent any element.
Selector and HTML examples
SelectorSpecificity(0, 1, 0)
[data-file$=".pdf"]
HTML
Matches: <a data-file="selectors.pdf">Matches</a>
<a data-file="selectors.html">Does not match</a>
SelectorSpecificity(0, 1, 0)
[href$=".pdf"]
HTML
<ul>
  <li>
Matches:     <a href="/guide.pdf">Matches</a>
  </li>
  <li>
    <a href="/pdf/guide">Does not match</a>
  </li>
</ul>
Common conceptual mistakes
  • [data-file$=".pdf"] does not match when .pdf appears before the end.
  • The selector compares text; it does not validate that the resource is actually a PDF.
Read the complete definitionOpens in a new tab

Substring

[attr*="fragment"]

Selects values containing at least one occurrence of the given string.

Specificity(0, 1, 0)
Important behavior
  • The *= operator can find the fragment at the beginning, middle, or end.
  • An empty comparison string does not represent any element.
Selector and HTML examples
SelectorSpecificity(0, 1, 0)
[data-note*="selector"]
HTML
Matches: <article data-note="selector-reference">Matches</article>
<article data-note="layout-reference">Does not match</article>
SelectorSpecificity(0, 1, 0)
[href*="/docs/"]
HTML
<nav>
Matches:   <a href="/docs/selectors/">Matches</a>
  <a href="/documentation/">Does not match</a>
</nav>
Common conceptual mistakes
  • It may match more broadly than expected because it does not respect word boundaries.
  • Do not confuse it with ~=, which requires a complete space-separated token.
Read the complete definitionOpens in a new tab

Letter-case modifiers

The i and s modifiers change how the value is compared regardless of the document language default.

ASCII case-insensitive

[attr="value" i]

Compares the attribute value without letter-case distinctions in the ASCII range.

Specificity(0, 1, 0)
Important behavior
  • The i modifier affects the value comparison in that attribute selector.
  • ASCII case-insensitive treats A-Z and a-z as equivalent but does not implement full Unicode case folding.
Selector and HTML examples
SelectorSpecificity(0, 1, 0)
[data-code="css-basics" i]
HTML
Matches: <article data-code="CSS-BASICS">Matches</article>
Matches: <article data-code="Css-Basics">Matches</article>
<article data-code="HTML-BASICS">Does not match</article>
SelectorSpecificity(0, 1, 0)
[data-theme="dark" i]
HTML
<section>
Matches:   <button data-theme="DARK">Matches</button>
  <button data-theme="light">Does not match</button>
</section>
Common conceptual mistakes
  • Do not claim that i ignores every letter-case difference in every alphabet.
  • The modifier does not make the rest of the compound selector case-insensitive.
Relevant support

This Baseline status belongs to the i modifier. The preview separately checks whether the current browser can evaluate the concrete selector.

Read the complete definitionOpens in a new tab

Case-sensitive

[attr="value" s]

Forces an identical value comparison that preserves letter case.

Specificity(0, 1, 0)
Important behavior
  • The s modifier overrides the letter-case rule that the document language would otherwise apply.
  • It can only distinguish values when the document model preserves their original case.
Selector and HTML examples
SelectorSpecificity(0, 1, 0)
[data-code="CSS-BASICS" s]
HTML
Matches: <article data-code="CSS-BASICS">Matches</article>
<article data-code="css-basics">Does not match</article>
SelectorSpecificity(0, 1, 0)
[data-state="OPEN" s]
HTML
<dialog>
Matches:   <button data-state="OPEN">Matches</button>
  <button data-state="open">Does not match</button>
</dialog>
Common conceptual mistakes
  • Valid syntax does not mean every browser can evaluate it.
  • It is not always redundant: some HTML attributes have their own matching rules.
Relevant support

This Baseline status belongs to the s modifier. If the browser does not support it, the lab reports it as not evaluable instead of simulating a match.

Read the complete definitionOpens in a new tab