: anak tunggal - Trik CSS | CSS Almanac 2025

The :only-childharta pemilih pseudo-kelas dalam CSS merupakan satu elemen yang mempunyai unsur ibu bapa dan yang ibubapa unsur tidak mempunyai anak elemen lain. Ini akan sama dengan :first-child:last-childatau :nth-child(1):nth-last-child(1), tetapi dengan kekhususan yang lebih rendah.

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

Contohnya, jika kita menyusun perenggan 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 boleh menggayakan satu-satunya

anak pertama kami . Anak-anak berikutnya dan anak-anak tidak akan digayakan kerana bekas ibu bapa menyimpan lebih dari satu anak (iaitu tag p).

p:only-child ( color:red; )

Kami juga boleh menggabungkan kelas pseudo tambahan seperti contoh ini yang memilih perenggan pertama dalam div bersarang kami dan anak tunggal dari div.contain.


Hello World
some more children

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

:only-childtidak akan berfungsi sebagai pemilih sekiranya elemen ibu bapa anda mengandungi lebih daripada satu anak dengan tanda yang sama. Sebagai contoh…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

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

Ini tidak akan menghasilkan div yang mewarisi warna merah kerana ibu bapa mengandungi lebih dari 1 anak (3 div yang tidak disebutkan namanya).

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.