docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,115 @@
|
||||
---
|
||||
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).
|
||||
Reference in New Issue
Block a user