Tutorial Belajar CSS Bagian 56 : Cara Menggunakan Selector nth-child di CSS

Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial Belajar CSS Bagian 55 : Cara Menggunakan Property List di CSS. Pada tutorial ini kita akan belajar tentang cara menggunakan property nth-child di CSS.

Selector nth-child ini digunakan untuk mencocokkan elemen berdasarkan posisinya, apa pun jenis induknya.

N dapat berupa kata kunci, rumus, atau angka. Ini digunakan untuk mencocokkan elemen berdasarkan posisinya dalam kelompok saudara kandung. Ini harus cocok dengan setiap elemen, yaitu anak ke-n.

Sintaksis

Berikut adalah sintaks pemilih ini :

:nth-child(n) {

//Properti CSS

}

Huruf “n” dalam tanda kurung adalah argumen yang mewakili pola elemen yang cocok. Ini bisa berupa notasi fungsional, genap atau ganjil.

Nilai ganjil mewakili elemen yang posisinya ganjil dalam deret seperti 1, 3, 5, dst. Demikian pula, nilai genap mewakili elemen yang posisinya genap dalam deret seperti 2, 4, 6, dst.

Notasi fungsional (An+B): Notasi fungsional mewakili elemen-elemen yang posisi saudara kandungnya cocok dengan pola An+B, dengan A adalah ukuran langkah bilangan bulat, n adalah bilangan bulat positif apa pun yang dimulai dari 0, dan B adalah offset bilangan bulat.

Mari kita lihat beberapa contoh.

Dalam contoh ini, kita menggunakan notasi fungsional 3n+4 yang akan mempengaruhi elemen:

(3×0)+4 = 4, (3×1)+4 =7, dan seterusnya.

<!DOCTYPE html>   
<html>   
    <head>   
        <title>CSS :nth-child Selector</title>   
        <style>    
              p:nth-child(3n+4) {   
              background: yellow;   
              color: black;   
              font-size:30px;  
            }   
        </style>   
    </head>   
    <body style = "text-align:center">   
        <h1>   
            Halo Dunia
        </h1>   
        <h2>   
            Selamat datang di Mbah WP 
        </h2>   
        
        <p> Ini tidak akan terpengaruh.</p>   
        <p> Ini akan terpengaruh.</p>   
        <p> Tidak akan terpengaruh.</p>   
        <p> Tidak akan terpengaruh.</p>   
        <p> Ini akan terpengaruh.</p>   
         
    </body>   
</html>

Contoh 2 :

Dalam contoh ini, kita akan menggunakan kata kunci ganjil dan genap yang cocok dengan elemen yang indeksnya ganjil atau genap. Perlu dicatat bahwa indeks anak pertama adalah 1.

<!DOCTYPE html>   
<html>   
    <head>   
        <title>CSS :nth-child Selector</title>   
        <style>    
            p:nth-child(even) {   
              background: yellow;   
              color: black;   
              font-size:30px;  
            }   
              p:nth-child(odd) {   
              background: blue;   
              color: white;   
              font-size:20px;  
            </style>   
    </head>   
    <body style = "text-align:center">   
        <h1>   
            Halo Dunia 
        </h1>   
        <h2>   
            Selamat datang di Mbah WP 
        </h2>   
        
        <p>Odd (Ganjil)</p>   
        <p>Even (Genap)</p>   
        <p>Odd (Ganjil)</p>   
        <p>Even (Genap)</p>   
        <p>Odd (Ganjil)</p>   
         
    </body>   
</html>

Semoga tutorial selector nth-child ini membantu Anda untuk mencocokkan elemen berdasarkan posisinya di website Anda.