Cara Menggunakan Pseudo-class only-of-type pada CSS

: only-of-type adalah pseudo-class CSS yang cocok dengan suatu elemen jika induknya tidak memiliki anak lain dari jenis yang sama.

Sebagai contoh, p: hanya tipe yang akan cocok dengan paragraf hanya jika itu adalah satu-satunya paragraf di dalam induknya. Jadi, itu akan memilih paragraf berikut:

<article>
    <h2>Heading</h2>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
</article>

Karena itu adalah satu-satunya paragraf dalam artikel, tetapi tidak akan cocok dengan salah satu paragraf berikut, karena tidak satupun dari mereka adalah satu-satunya paragraf di dalam wadah mereka:v

<article>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</article>

Trivia & Catatan

: only-of-type mirip dengan pemilih: only-child, kecuali bahwa: pemilih only-child memilih elemen jika induknya tidak memiliki anak lain dari jenis apa pun. Anda dapat membaca lebih lanjut tentang: only-child dalam entri.

Sama seperti penyeleksi pseudo-class lainnya, pemilih: only-of-type dapat dirantai dengan penyeleksi lain seperti: hover dan dengan elemen pseudo seperti :: after, antara lain. Misalnya, aturan berikut akan menambahkan konten ke tautan dalam paragraf jika itu adalah satu-satunya tautan dalam paragraf itu:

a:only-of-type::after {
    
}

Contoh

article:only-of-type { /* styles */}

span:only-of-type { /* styles */}

a:only-of-type:hover { /* styles */}

p:only-of-type a { /* styles */}