CSS 카운터 리셋 속성

정의와 사용법

counter-reset 속성은 특정 선택자가 나타나는 횟수의 카운터 값을 설정합니다. 기본적으로 0으로 설정됩니다.

이 속성을 사용하여, 카운터는 어떤 값으로도 설정이나 초기화할 수 있습니다. 양수나 음수로 설정할 수 있습니다. number가 제공되지 않으면 기본적으로 0으로 설정됩니다.

주의사항:"display: none"을 사용하면 카운터를 재설정할 수 없습니다. "visibility: hidden"을 사용하면 카운터를 재설정할 수 있습니다.

추가로 참조:

CSS 참조 설명서:CSS :before 가상 요소

CSS 참조 설명서:CSS :after 가상 요소

CSS 참조 설명서:content 속성

CSS 참조 설명서:counter-increment 속성

CSS 함수:counter() 함수

HTML DOM 참조 설명서:counterReset 속성

예제

부분과 서브 부분에 번호를 매기는 방법(예: "Section 1", "1.1", "1.2")은 다음과 같습니다:

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

직접 테스트해 보세요

CSS 문법

counter-reset: none|이름 number|initial|inherit;

속성 값

값 설명
none 기본. 선택자의 카운터를 재설정할 수 없습니다.
id number

id 카운터를 재설정할 선택자, id 또는 class를 정의합니다.

number 이 선택자가 나타나는 횟수를 나타내는 카운터의 값을 설정할 수 있습니다. 양수, 0 또는 음수가 될 수 있습니다.
inherit counter-reset 속성의 값을 부모 요소에서 상속해야 합니다.

기술 세부 사항

기본값: none
상속성: no
버전: CSS2
JavaScript 문법: object.style.counterReset="subsection"

브라우저 지원

표에 나타난 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전입니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
4.0 8.0 2.0 3.1 9.6

주의사항:!DOCTYPE가 이미 정의되어 있다면, Internet Explorer 8(그 이상 버전)는 counter-reset 속성을 지원합니다.