Cara Menggunakan :only-child dalam pseudo-class pada CSS

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:

<article>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, enim, libero voluptatum id nostrum porro laborum error nisi fugit atque
    </p>
</article>

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

<article>
    <h1>Heading</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, iusto, eos similique eaque minus magni tempore repudiandae
    </p>
</article>

: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:

li:only-child::after {
    content: "Last item, get it before it is sold out!";
    color: salmon;
}

Contoh penggunaan :only-child :

li:only-child { /* styles */}

span:only-child { /* styles */}

article:only-child:hover { /* styles */}

a:only-child::after { /* styles */}

.product:only-child h1 { /* styles */}

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