CSS Nth-Child

0 100

CSS Nth-Child, belirli bir HTML öğesi seçicisinde belirli bir sıradaki öğeleri seçmek için kullanılan bir CSS seçicisidir.

Bu seçici, belirli bir öğe türü (div, li, span vb.) içindeki belirli bir sıradaki öğeleri seçmek için kullanılabilir. Örneğin, 2. sıradaki <li> öğesini seçmek için li:nth-child(2) kullanılabilir.

Ayrıca, nth-child seçicisi ile matematiksel formüller de kullanılabilir. Örneğin, 3 ile bölünebilen tüm öğeleri seçmek için :nth-child(3n) kullanılabilir.

Bu seçici, web sayfalarındaki öğelerin düzenlenmesi ve tasarımı için oldukça yararlıdır.

CSS Nth-Child Örnekleri

Belli Bir Kutuyu Belirtip Kırmızıya Boyama

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
        <title>CSS Nth-Child</title>
        <style>
            .sayfa{
                width: 600px;
                margin:  auto;
            }
            .kutu{
                width: 100px;
                height: 100px;
                border: 4px solid #000;
                margin: 8px;
                background: blue;
                line-height: 100px;
                float: left;
                text-align: center;
                font-size: 24px;     
            }
            .sayfa > .kutu:nth-child(10){
                background: red;
            }        
        </style>
 
    </head>
    <body>
        <div class="sayfa">
            <div class="kutu">BİR</div>
            <div class="kutu">İKİ</div>
            <div class="kutu">ÜÇ</div>
            <div class="kutu">DÖRT</div>
            <div class="kutu">BEŞ</div>
            <div class="kutu">ALTI</div>
            <div class="kutu">YEDİ</div>
            <div class="kutu">SEKİZ</div>
            <div class="kutu">DOKUZ</div>
            <div class="kutu">ON</div>
            <div class="kutu">ONBİR</div>
            <div class="kutu">ONİKİ</div>
            <div class="kutu">ONÜÇ</div>
            <div class="kutu">ONDÖRT</div>
            <div class="kutu">ONBEŞ</div>
            <div class="kutu">ONALTI</div>
        </div>
    </body>
</html>

Çıktısı:

Çift Olan Kutuları Belirtip Kırmızıya Boyama

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
        <title>CSS Nth-Child</title>
        <style>
            .sayfa{
                width: 600px;
                margin:  auto;
            }
            .kutu{
                width: 100px;
                height: 100px;
                border: 4px solid #000;
                margin: 8px;
                background: blue;
                line-height: 100px;
                float: left;
                text-align: center;
                font-size: 24px;     
            }
            .sayfa > .kutu:nth-child(2n){
                background: red;
            }        
        </style>
 
    </head>
    <body>
        <div class="sayfa">
            <div class="kutu">BİR</div>
            <div class="kutu">İKİ</div>
            <div class="kutu">ÜÇ</div>
            <div class="kutu">DÖRT</div>
            <div class="kutu">BEŞ</div>
            <div class="kutu">ALTI</div>
            <div class="kutu">YEDİ</div>
            <div class="kutu">SEKİZ</div>
            <div class="kutu">DOKUZ</div>
            <div class="kutu">ON</div>
            <div class="kutu">ONBİR</div>
            <div class="kutu">ONİKİ</div>
            <div class="kutu">ONÜÇ</div>
            <div class="kutu">ONDÖRT</div>
            <div class="kutu">ONBEŞ</div>
            <div class="kutu">ONALTI</div>
        </div>
    </body>
</html>

Çıktısı:

Sağdan bir önceki yani Üç-Yedi-Onbir-Onbeş Nolu kutuları Seçip Kırmızıya Boyama.

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
        <title>CSS Nth-Child</title>
        <style>
            .sayfa{
                width: 600px;
                margin:  auto;
            }
            .kutu{
                width: 100px;
                height: 100px;
                border: 4px solid #000;
                margin: 8px;
                background: blue;
                line-height: 100px;
                float: left;
                text-align: center;
                font-size: 24px;     
            }
            .sayfa > .kutu:nth-child(4n-1){
                background: red;
            }        
        </style>
 
    </head>
    <body>
        <div class="sayfa">
            <div class="kutu">BİR</div>
            <div class="kutu">İKİ</div>
            <div class="kutu">ÜÇ</div>
            <div class="kutu">DÖRT</div>
            <div class="kutu">BEŞ</div>
            <div class="kutu">ALTI</div>
            <div class="kutu">YEDİ</div>
            <div class="kutu">SEKİZ</div>
            <div class="kutu">DOKUZ</div>
            <div class="kutu">ON</div>
            <div class="kutu">ONBİR</div>
            <div class="kutu">ONİKİ</div>
            <div class="kutu">ONÜÇ</div>
            <div class="kutu">ONDÖRT</div>
            <div class="kutu">ONBEŞ</div>
            <div class="kutu">ONALTI</div>
        </div>
    </body>
</html>

Çıktısı:

nth-last-child() ile sondan Eleman Seçip Kırmızıya Boyama.

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
        <title>CSS Nth-Child</title>
        <style>
            .sayfa{
                width: 600px;
                margin:  auto;
            }
            .kutu{
                width: 100px;
                height: 100px;
                border: 4px solid #000;
                margin: 8px;
                background: blue;
                line-height: 100px;
                float: left;
                text-align: center;
                font-size: 24px;     
            }
            .sayfa > .kutu:nth-last-child(2){
                background: red;
            }        
        </style>
 
    </head>
    <body>
        <div class="sayfa">
            <div class="kutu">BİR</div>
            <div class="kutu">İKİ</div>
            <div class="kutu">ÜÇ</div>
            <div class="kutu">DÖRT</div>
            <div class="kutu">BEŞ</div>
            <div class="kutu">ALTI</div>
            <div class="kutu">YEDİ</div>
            <div class="kutu">SEKİZ</div>
            <div class="kutu">DOKUZ</div>
            <div class="kutu">ON</div>
            <div class="kutu">ONBİR</div>
            <div class="kutu">ONİKİ</div>
            <div class="kutu">ONÜÇ</div>
            <div class="kutu">ONDÖRT</div>
            <div class="kutu">ONBEŞ</div>
            <div class="kutu">ONALTI</div>
        </div>
    </body>
</html>

Çıktısı:

Cevap bırakın

E-posta hesabınız yayımlanmayacak.