Pseudo-class :only-child adalah selektor pseudo CSS yang cocok dengan elemen jika itu adalah anak satu-satunya orang tuanya. Artinya, elemen dipilih hanya jika induknya tidak memiliki anak lain dari jenis apa pun. Masih bingung kan? Yuk simak lebih lanjut.

Misalnya, li: only-child akan cocok dengan item daftar hanya jika itu adalah satu-satunya item dalam daftar. p: only-child akan mencocokkan satu paragraf hanya jika itu adalah satu-satunya anak di dalam wadahnya. Jadi, ini akan memilih paragraf berikut:

Tetapi itu tidak akan cocok dengan paragraf berikut, karena ini bukan satu-satunya anak dari orang tuanya (article):

 

Selektor pseudo-class :only-child adalah sama dengan :first-child, :last-child dan :nth-child(1), :nth-last-child(1), kecuali yang memiliki spesifitas yang lebih rendah. :first-child, :last-child akan cocok dengan elemen yang merupakan anak pertama dan terakhir dari orang tuanya (yaitu anak tunggal), dan: nth-child (1), : nth-last-child (1) akan cocok dengan elemen jika anak pertama dari atas dan anak pertama dari bawah, yang juga berarti itu adalah anak tunggal dari orang tuanya.

Sama seperti pemilih kelas pseudo lainnya, pemilih: hanya-anak dapat dirantai dengan pemilih lain seperti: hover dan dengan elemen pseudo seperti :: after, antara lain. Sebagai contoh, aturan berikut akan menambahkan konten ke item dalam daftar jika itu adalah satu-satunya item dalam daftar itu:

 

Contoh penggunaan Selektor Pseudo-class :only-child,