2nd/10_Wiki/Topic_Programming/Topic_CSS/CSS_Counters_Nested.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-nested-counters	CSS Nested Counters	Frontend	draft	conceptual		CSS nested counters counters() function multi-level numbering section subsection numbering nested list numbering		B	0.88	2026-06-23	2026-06-23			css web frontend w3schools counters generated-content lists	https://www.w3schools.com/css/css_counters_nested.asp

CSS Nested Counters

🎯 한 줄 통찰 (One-line insight)

By running two counters at once — or by using the counters() function — CSS can produce multi-level numbering such as "Section 1.1" or outline-style "1.1.1" labels for nested lists, all without JavaScript. [S1]

🧠 핵심 개념 (Core concepts)

• Two counters — you can maintain more than one counter to number different levels (e.g., a section counter for the page and a subsection counter reset on each <h1>). [S1]
• counters() function — returns the current values of the named and nested counters, as a string. [S1]
• counters() vs counter() — counter() returns the current value of a single named counter; counters() returns the named and nested counter values combined into a string. [S1]
• Separator argument — counters(name, separator) inserts a string (e.g., ".") between nesting levels. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Per-level reset — reset the lower-level counter on the higher-level element (reset subsection on each <h1>) so it restarts under every parent. [S1]
• Self-nesting lists — reset the same counter on every <ol> and emit counters(section,".") on each <li>::before to auto-build hierarchical numbers like 1, 1.1, 1.2. [S1]

📖 세부 내용 (Details)

CSS Using Two Counters You can create multiple counters for different numbering levels: a section counter for the page and a subsection counter for each <h1> element. The section counter increments on each <h1>, while a subsection counter (reset on each <h1>) increments on each <h2>, producing labels like "Section 1." and "1.1". [S1]

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

The CSS counters() Function The counters() function returns the current values of the named and nested counters, as a string. In this example, the same section counter is reset on every <ol> and incremented on each <li>, and counters(section,".") joins the nested values with a "." separator to produce outline numbering within an ordered-list structure: [S1]

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

CSS Counter Properties The page lists the following counter-related properties and functions: [S1]

Property / Function	Description
content	Used with the ::before and ::after pseudo-elements, to insert generated content [S1]
counter-increment	Increments one or more counter values [S1]
counter-reset	Creates or resets one or more counters [S1]
counter()	Returns the current value of the named counter [S1]
counters()	Returns the current values of the named and nested counters [S1]

🛠️ 적용 사례 (Applied in summary)

The page's examples are the applied cases: "Section N." / "N.M" headings produced by two counters, and outline-style "1.1.1" numbering for a nested ordered list via counters(). No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Two-level heading numbering (language: CSS):

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Self-nesting list numbering (language: CSS):

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

• counter() — use when you need the value of a single counter at one level (e.g., "Section 3"). [S1]
• counters() — use when you need the named and nested counter values joined into one string for multi-level/outline numbering (e.g., "3.2.1"), supplying a separator argument such as ".". [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 Counters, CSS Lists, CSS Pseudo-elements
• 참조 맥락: Referenced when building multi-level outline numbering for headings or nested lists.

📚 출처 (Sources)

• [S1] W3Schools — CSS Nested Counters — https://www.w3schools.com/css/css_counters_nested.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS Nested Counters" page (Astra wiki-curation, P-Reinforce v3.1 format).