: anak tunggal - Trik CSS | CSS Almanak 2025

The :only-childpemilih pseudo-class properti di CSS merupakan elemen yang memiliki elemen induk dan yang elemen induk tidak memiliki anak unsur lainnya. Ini akan sama dengan :first-child:last-childatau :nth-child(1):nth-last-child(1), tetapi dengan spesifisitas yang lebih rendah.

div p:only-child ( color: red; )

Misalnya, jika kita menyarangkan paragraf dalam seperti itu…


This paragraph is the only child of its parent
This paragraph is the first child of its parent
This paragraph is the second child of its parent

Sekarang kita bisa menata satu-satunya

dari anak pertama kami . Yang berikutnya dan anak-anaknya tidak akan pernah diberi gaya karena wadah induk menampung lebih dari satu anak (yaitu tag p).

p:only-child ( color:red; )

Kita juga bisa mencampur pseudo-class tambahan seperti contoh ini yang memilih paragraf pertama dalam div bersarang dan anak satu-satunya dari div.contain.


Hello World
some more children

div.contain div:only-child :first-child ( color: red; )

:only-childtidak akan berfungsi sebagai pemilih jika elemen induk Anda berisi lebih dari satu anak dengan tag identik. Sebagai contoh…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

div.contain div:only-child ( color: red; )

Ini akan menghasilkan tidak ada div yang mewarisi warna merah karena induk berisi lebih dari 1 anak (3 div tanpa nama).

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.