css counter nedir? Nasıl kullanılır?

css counter özelliği, html elemanlarının kaç kez kullanıldığı bulmak ve bu değeri kullanabilmek için tanımlanmış css değişkenidir. İçeriğin görümüne etki yapmanıza olacak tanır.

css counter özelliğini çalıştırmak için kullanmamız gereken özellikler:
counter-reset : Bir yada daha fazla sayaç oluşturmak ve sıfırlamak için kullanırız.
counter-incremet :Sayacın değerini artırmak için kullanırız.
counter() : Var olan sayacın değeri Html sayfasında dahil etmek için kullanırız.
content : İçeriği etki etmek için kullanırız.

Aldığı parametreler:
counter name : Sayacın adı.
style-type : Eklediğimiz içeriğin stili. (decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman)

Örnek : body altındaki bütün ul tag lerini saydırma örneği

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body { 
            counter-reset : ul-counter            
        }
        ul::before { 
            counter-increment:ul-counter;
            content: "ul " counter(ul-counter) " : "
        }       
    </style>
<body>
    <ul class="one"> Web Yazılım
        <li> Html </li>
        <li> CSS 
            <ul>Framework
                <li>Bootstrap</li>
                <li>Materialize</li>
            </ul>
        </li>
        <li> JS </li>
        <li> ASP </li>
        <li> PHP </li>
    </ul>
    <ul class="two">Web Yazılım
        <li> Html </li>
        <li> CSS 
            <ul>Framework
                <li>Bootstrap</li>
                <li>Materialize</li>
            </ul>
        </li>
        <li> JS </li>
        <li> ASP </li>
        <li> PHP </li>

    </ul>
    <ul class="three">
        <li> Html </li>
        <li> CSS </li>
        <li> JS </li>
    </ul>
</body>
</html>

Html Çıktısı:

css counter

Örnek2: Her ul altıdaki li leri saydırma örneği.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>     
        ul   { 
            counter-reset: li-counter;
            list-style: none;
        }
        ul li::before   { 
            counter-increment: li-counter;
            content: counter(li-counter) " : ";
        }
        ul.two li::before  { 
            counter-increment: li-counter;
            content: counter(li-counter, upper-alpha) " : ";
         }   
    </style>
<body>
    <ul class="one"> Web Yazılım
        <li> Html </li>
        <li> CSS 
            <ul>Framework
                <li>Bootstrap</li>
                <li>Materialize</li>
            </ul>
        </li>
        <li> JS </li>
        <li> ASP </li>
        <li> PHP </li>
    </ul>
    <ul class="two">Web Yazılım
        <li> Html </li>
        <li> CSS 
            <ul>Framework
                <li>Bootstrap</li>
                <li>Materialize</li>
            </ul>
        </li>
        <li> JS </li>
        <li> ASP </li>
        <li> PHP </li>

    </ul>
    <ul class="three">
        <li> Html </li>
        <li> CSS </li>
        <li> JS </li>
    </ul>
</body>
</html>

Html çıktısı:

css counter kullanımı

Yukarıdaki örnekte dikkat ederseniz her ul tagi açılmasında sayacı sıfırlıyor ve başladığı ul içindeki li leri sayıyor. Bu özellikten daha kapsamlı olan css counters özelliği vardır. counter özelliği yerine counters özelliği de kullanabilirsiniz.

Başka bir yazımızda görüşmek üzere…

Leave a Reply