Halo teman-teman pada kesempatan kali ini saya akan menjelaskan Cara Menggunakan :only-child dalam pseudo-class pada CSS.

:only-child adalah CSS pseudo-selector yang cocok untuk unsur yang dipilih hanya jika induknya tidak memiliki anak-anak lain dari jenis apa pun. Sebagai contoh li:only-child akan cocok dengan item daftar hanya jika itu adalah satu-satunya item dalam menu.

Contoh lain, p:only-child akan cocok dengan sebuah paragraf hanya jika tag p tersebut adalah satu-satunya anak didalam tag pembungkus tag article, contoh:

Tetapi jika dalam satu tag pembungkus teman-teman memiliki anak yang lainnya, maka tidak akan berfungsi, contoh:

:only-child pada pseudo-selector mirip dengan :first-child, :last-child, nth-child(1), nth-last-child(1) terkecuali untuk :first-child dan :last-child. Dimana anak akan cocok dengan elemen yang merupakan anak pertama dan terakhir dari induknya (yaitu satu-satunya anak).

Sama seperti pseudo-class selector yang lainnya, :only-child selector dapat dirantai dengan pemilih lainnya seperti: hover dan dengan pseudo-elemen seperti :after. Aturan berikut akan menambahkan konten ke item dalam daftar jika itu adalah satu-satunya item dalam daftar itu, contoh:

Contoh penggunaan :only-child :

Perlu diperhatikan juga bahwa :only-child akan berfungsi atau support terhadap browser di Chrome, Firefox, Safari, Opera 9.5 +, Internet Explorer 9 +, dan di Android dan iOS. Semoga bermanfaat