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,124 @@
|
||||
---
|
||||
id: css-advanced-attribute-selectors
|
||||
title: "CSS Advanced Attribute Selectors"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["advanced attribute selector", "[attribute^=value]", "[attribute$=value]", "[attribute*=value]", "substring attribute selector"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
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_advanced.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[CSS Advanced Attribute Selectors]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The advanced attribute selectors match by substring position — `^=` for values that start with, `$=` for values that end with, and `*=` for values that contain a string — and combine with `input[type=...]` to style form controls. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`[attribute^="value"]`** — selects elements with the specific attribute whose value **starts with** a specific value. [S1]
|
||||
- **`[attribute$="value"]`** — selects elements whose attribute value **ends with** a specific value. [S1]
|
||||
- **`[attribute*="value"]`** — selects elements whose attribute value **contains** a specific value (substring, anywhere). [S1]
|
||||
- **Form styling use** — attribute selectors are commonly used to style form elements by their `type`, e.g. `input[type="text"]` and `input[type="button"]`. [S1]
|
||||
|
||||
## 🧩 추출된 패턴 (Extracted patterns)
|
||||
- **Prefix match** — `^=` targets values beginning with a token (e.g. class names that start with `top`). [S1]
|
||||
- **Suffix match** — `$=` targets values ending with a token (e.g. class names ending in `test`, or file extensions). [S1]
|
||||
- **Substring match** — `*=` targets any value containing the token, the most permissive of the three. [S1]
|
||||
- **Type-based form styling** — drive distinct styles for text vs. button inputs purely from their `type` attribute. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
**`[attribute^="value"]` selector**
|
||||
The `[attribute^="value"]` selector is used to select elements with the specific attribute whose value **starts with** a specific value. The following selects elements whose class starts with "top": [S1]
|
||||
```css
|
||||
[class^="top"] {
|
||||
background: yellow;
|
||||
}
|
||||
```
|
||||
|
||||
**`[attribute$="value"]` selector**
|
||||
The `[attribute$="value"]` selector is used to select elements whose attribute value **ends with** a specific value. The following selects elements whose class ends with "test": [S1]
|
||||
```css
|
||||
[class$="test"] {
|
||||
background: yellow;
|
||||
}
|
||||
```
|
||||
|
||||
**`[attribute*="value"]` selector**
|
||||
The `[attribute*="value"]` selector is used to select elements whose attribute value **contains** a specific value. The following selects elements whose class contains "te": [S1]
|
||||
```css
|
||||
[class*="te"] {
|
||||
background: yellow;
|
||||
}
|
||||
```
|
||||
|
||||
**Styling Forms With Attribute Selectors**
|
||||
Attribute selectors can style form controls by their `type`. The following styles text inputs and button inputs differently: [S1]
|
||||
```css
|
||||
input[type="text"] {
|
||||
width: 150px;
|
||||
padding: 6px;
|
||||
margin-bottom: 10px;
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
input[type="button"] {
|
||||
width: 100px;
|
||||
padding: 6px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
```
|
||||
|
||||
> Note: The full HTML markup for the form example is not shown in the fetched source — "Not found in source."
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
The page's examples demonstrate the three substring selectors on `class` values and applying type-based attribute selectors to style form inputs. No external project/commit applications found in the source.
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
The three substring attribute-selector forms (language: CSS):
|
||||
```css
|
||||
[class^="top"] { background: yellow; } /* starts with */
|
||||
[class$="test"] { background: yellow; } /* ends with */
|
||||
[class*="te"] { background: yellow; } /* contains */
|
||||
```
|
||||
Type-based form styling (language: CSS):
|
||||
```css
|
||||
input[type="text"] { width: 150px; padding: 6px; margin-bottom: 10px; background-color: pink; }
|
||||
input[type="button"] { width: 100px; padding: 6px; background-color: lightgreen; }
|
||||
```
|
||||
|
||||
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
|
||||
- **`^=` (starts with)** — use when matching a known prefix, e.g. a naming convention where related classes begin with the same token. [S1]
|
||||
- **`$=` (ends with)** — use when matching a known suffix, e.g. classes ending in `test`. [S1]
|
||||
- **`*=` (contains)** — use when the token may appear anywhere in the value; broadest match of the three. [S1]
|
||||
- **vs. basic selectors** — these substring forms complement the basic `[attribute]`, `=`, `~=`, and `|=` selectors documented in [[CSS Attribute Selectors]], adding positional substring matching that the basic set lacks. [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.88
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[CSS Tutorial]]
|
||||
- **관련 개념:** [[CSS Attribute Selectors]], [[CSS Selectors]], [[CSS Styling Forms]]
|
||||
- **참조 맥락:** Referenced when targeting elements by partial attribute values or styling form controls by their `type`.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — CSS Advanced Attribute Selectors — https://www.w3schools.com/css/css_attribute_selectors_advanced.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Advanced Attribute Selectors" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
Reference in New Issue
Block a user