Webishブログ

未経験から海外でweb開発を目標に、必死に勉強している人のブログ

cssプロパティのcounterを使って詰まった話。

スポンサードリンク

サイトを作っていて、それぞれのセクションに番号が順番に振られているデザインだったので、counterを使ったのですが、それで少し詰まったのでブログに書こうと思います。

 

 

基本的に、counterは親要素でリセット定義しておけば、その子要素でカウンターがincrement(増えていく)していくプロパティで知られていますが

 

 

単純に増やしたいものの親要素に付けても増えません。

 

どういう事か  

 

<section>
<div class="box"><span>テスト</span></div>
<div class="box"><span>テスト</span></div>
<div class="box"><span>テスト</span></div>
</section>
<section>
<div class="box"><span>テスト</span></div>
<div class="box"><span>テスト</span></div>
<div class="box"><span>テスト</span></div>
</section>
<section>
<div class="box"><span>テスト</span></div>
<div class="box"><span>テスト</span></div>
<div class="box"><span>テスト</span></div>
</section>

 

body {
  section {
    .box {
      span {
        counter-reset: section;
        &::before {
        counter-increment: section;
        content: counter(section);   
        }
      }
    }    
  }
}

(注:scssで書かれています)

before要素の親だーと、バカの一つ覚えみたいに一つ上の要素でresetをしているのである。

 

 

これじゃ効くはずがない・・・。

 

ちゃんと効かせたいのなら、spanより上の要素、つまりbodyかsectionか.boxでリセットしないといけないのだ。

 

これはどこでもセットしてもいいみたいだが、別のcounterを同じページで増やしたい場合は、spanの1個上の要素とかでresetするのが良さそうだ。

 

どっちにしても名前をつけているので、その名前を持つ要素のナンバーがincrementされるという事になる。

 

この問題に直面し、少し悩んでいた・・・。