: enda barn - CSS-tricks | CSS Almanack 2025

Den :only-childfastighetspseudo klass väljare i CSS representerar ett element som har ett överordnat element och vars överordnade elementet har inga andra ämnen barn. Detta skulle vara detsamma som :first-child:last-childeller :nth-child(1):nth-last-child(1), men med lägre specificitet.

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

Till exempel om vi häckar stycken inom en liknande ...


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

Nu kan vi utforma det enda

av vårt första barn . Den efterföljande och dess barn kommer aldrig att utformas eftersom föräldrabehållaren rymmer mer än ett barn (dvs. p-taggarna).

p:only-child ( color:red; )

Vi kan också blanda in ytterligare pseudoklasser som det här exemplet som väljer första stycket i vår kapslade div och det enda barnet till div.contain.


Hello World
some more children

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

:only-childfungerar inte som väljare om ditt överordnade element innehåller mer än ett barn med identisk tagg. Till exempel…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

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

Detta kommer att resultera i att inga divs ärver färgen röd eftersom föräldern innehåller mer än 1 barn (de 3 namnlösa divsna).

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.