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:
1 2 3 4 5 |
<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:
1 2 3 4 5 6 |
<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:
1 2 3 4 |
li:only-child::after { content: "Last item, get it before it is sold out!"; color: salmon; } |
Contoh penggunaan :only-child :
1 2 3 4 5 6 7 8 9 |
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