CSS 카운터 인크리먼트 속성

정의와 사용법

counter-increment 속성은 선택자가 매번 나타날 때 카운터의 증가량을 설정합니다. 기본 증가량은 1입니다.

설명

이 속성을 사용하여 카운터가 특정 값을 증가(또는 감소)할 수 있습니다. 이 값은 양수 또는 음수일 수 있습니다. number 값이 제공되지 않으면 기본적으로 1입니다.

주의사항:"display: none"을 사용하면 카운터를 증가시킬 수 없습니다. "visibility: hidden"을 사용하면 카운터를 증가시킬 수 있습니다.

다른 것도 참조하세요:

CSS 참조 가이드:CSS :before 가상 요소

CSS 참조 가이드:CSS :after 가상 요소

CSS 참조 가이드:content 속성

CSS 참조 가이드:counter-reset 속성

CSS 함수:counter() 함수

HTML DOM 참조 가이드:counterIncrement 속성

예제

부분과 서브 부분에 번호를 매기는 방법(예: "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-increment: none|id|initial|inherit;

속성 값

값 설명
none 기본 설정. 선택자에 대한 카운터 증가량이 없습니다.
id number

id 증가할 선택자, id 또는 class를 정의합니다.

number 증가량을 정의합니다. number는 양수, 0 또는 음수일 수 있습니다.
inherit counter-increment 속성의 값을 부모 요소에서 상속해야 합니다.

기술 세부 사항

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

브라우저 지원

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

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

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