---
id: css-attribute-selectors
title: "CSS Attribute Selectors"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["attribute selector", "[attribute] selector", "[attribute=value]", "[attribute~=value]", "[attribute|=value]"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.89
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "selectors", "attributes"]
raw_sources: ["https://www.w3schools.com/css/css_attribute_selectors.asp"]
applied_in: []
github_commit: ""
---

# [[CSS Attribute Selectors]]

## 🎯 한 줄 통찰 (One-line insight)
CSS attribute selectors use square brackets to target HTML elements by the presence or value of an attribute — from a plain `[attribute]` match through exact (`=`), word-list (`~=`), and hyphen-prefix (`|=`) matching. [S1]

## 🧠 핵심 개념 (Core concepts)
- **Attribute selector** — selects and styles HTML elements with a specific attribute, a specific attribute value, or both. [S1]
- **Square-bracket syntax** — attribute selectors are written inside square brackets `[]`. [S1]
- **`[attribute]`** — selects elements that have the specified attribute, regardless of value. [S1]
- **`[attribute="value"]`** — selects elements with a specific attribute and an exact value. [S1]
- **`[attribute~="value"]`** — selects elements whose attribute value is a space-separated list of words, one of which is the value. [S1]
- **`[attribute|="value"]`** — selects elements whose value is exactly the value, or starts with the value followed by a hyphen (`-`). [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Presence targeting** — style every element carrying a given attribute (e.g. every link with a `target`) without touching the HTML. [S1]
- **Word-membership match** — `~=` matches when the value appears as one whole word in a space-separated list, useful for multi-token attributes. [S1]
- **Language/prefix match** — `|=` matches a whole value or a value immediately followed by a hyphen, the classic pattern for language codes (`en`, `en-US`). [S1]

## 📖 세부 내용 (Details)
**What are attribute selectors?**
CSS attribute selectors are used to select and style HTML elements with a specific attribute or attribute value, or both. Attribute selectors use square brackets `[]`. [S1]

**Tip:** The attribute selectors are case-sensitive by default. To perform a case-insensitive match, add an `i` before the closing bracket. [S1]

**Example 1 — `[attribute]` selector**
Selects all `<a>` elements with a `target` attribute: [S1]
```css
a[target] {
  background-color: yellow;
}
```

**Example 2 — `[attribute="value"]` selector**
Selects all `<a>` elements with a `target="_blank"` attribute: [S1]
```css
a[target="_blank"] {
  background-color: yellow;
}
```

**Example 3 — `[attribute~="value"]` selector**
Selects all elements with a `title` attribute that contains a space-separated list of words, one of which is "flower." Per the source note, this will match elements with `title="flower"`, `title="summer flower"`, and `title="flower new"`, but not `title="my-flower"` or `title="flowers"`: [S1]
```css
[title~="flower"] {
  border: 5px solid yellow;
}
```

**Example 4 — `[attribute|="value"]` selector**
Selects elements with the specific attribute whose value can be exactly the value, or start with the value followed by a hyphen (`-`). **Note:** The value has to be a whole word, either alone, like `class="top"`, or followed by a hyphen (`-`), like `class="top-text"`: [S1]
```css
[class|="top"] {
  background: yellow;
}
```

## 🛠️ 적용 사례 (Applied in summary)
The page's four examples demonstrate applying each selector form to links and titled/classed elements. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
The four basic attribute-selector forms (language: CSS):
```css
a[target]            { background-color: yellow; }   /* has attribute */
a[target="_blank"]   { background-color: yellow; }   /* exact value */
[title~="flower"]    { border: 5px solid yellow; }   /* word in list */
[class|="top"]       { background: yellow; }          /* value or value- */
```

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`[attribute]`** — use when only the presence of the attribute matters, not its value. [S1]
- **`[attribute="value"]`** — use when you need an exact, complete value match. [S1]
- **`[attribute~="value"]`** — use when the attribute holds a space-separated word list and you want elements where one whole word equals the value (does not match substrings like `flowers` or hyphenated `my-flower`). [S1]
- **`[attribute|="value"]`** — use when you want the exact value or that value followed by a hyphen, e.g. matching `top` and `top-text`. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.89
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Advanced Attribute Selectors]], [[CSS Selectors]], [[CSS Combinators]]
- **참조 맥락:** Referenced whenever styling elements by their attributes — links by `target`, inputs by `type`, elements by `title`/`lang`/`class`.

## 📚 출처 (Sources)
- [S1] W3Schools — CSS Attribute Selectors — https://www.w3schools.com/css/css_attribute_selectors.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Attribute Selectors" page (Astra wiki-curation, P-Reinforce v3.1 format).