[css] CSS - 자식요소 앞에 순번 붙이기 (= 색인번호 추가 = 요소 카운팅)

1. CSS counter() 함수 이용
2. CSS display: list-item; 속성 이용
3. jQuery each() 메서드 이용

CSS counter() 함수 이용 

 

<style>

#hz{

    counter-reset: var-count;

}

#hz h2::before{

    counter-increment: var-count;

    content: counter(var-count) ". ";

}

#hz h2:only-of-type::before {

    content: "";

}

</style>

 

<div id="hz">

    <h2>번째 H2</h2>

    <h2>번째 H2</h2>

    <h2>번째 H2</h2>

    <h2>번째 H2</h2>

    <h2>번째 H2</h2>

</div>

 

결과보기

PS. 크롬/파이어폭스에서 적용 안 될 경우, 선택자 명시도 (우선순위) 점검

CSS display: list-item; 속성 이용

 

<style>

#hz h2 {   

    display: list-item;

    list-style-type:decimal;

    list-style-position: inside;

}

</style>

<div id="hz">

    <h2>번째 H2</h2>

    <h2>번째 H2</h2>

    <h2>번째 H2</h2>

    <h2>번째 H2</h2>

    <h2>번째 H2</h2>

</div>

 

결과보기

엑스엠엘 님 (210811) https://sir.kr/qa/425761 

jQuery each() 메서드 이용

 

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function() {

    $("#hz h2").each(function(i) {

        $(this).text((i + 1) + $(this).text());

    });

}); 

</script>

<div id="hz">

    <h2>번째 H2</h2>

    <h2>번째 H2</h2>

    <h2>번째 H2</h2>

    <h2>번째 H2</h2>

    <h2>번째 H2</h2>

</div>

 

결과보기 

쟁반짜장 님 (210811) https://sir.kr/qa/425761