:only-childPseido klases selektors īpašums CSS apzīmē elementu, kas ir mātes elementu un kuru mātes elementam nav citu elementu bērniem. Tas būtu tas pats, kas :first-child:last-childvai :nth-child(1):nth-last-child(1), bet ar zemāku specifiku.
div p:only-child ( color: red; )Piemēram, ja mēs ligzdojam rindkopas līdzīgā veidā…
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
Tagad mēs varam stilizēt vienīgo
mūsu pirmā bērna . Turpmākie un tā bērni nekad netiks veidoti, jo vecāku konteinerā ir vairāk nekā viens bērns (ti, p tagi).
p:only-child ( color:red; )Mēs varētu arī sajaukt papildu pseidoklases, piemēram, šo piemēru, kas izvēlas pirmo rindkopu mūsu ligzdotajā div un vienīgo bērnu div.contain.
Hello World
some more children
div.contain div:only-child :first-child ( color: red; ):only-childnedarbosies kā atlasītājs, ja vecāku elementā ir vairāk nekā viens bērns ar identisku tagu. Piemēram…
paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2
div.contain div:only-child ( color: red; )Tā rezultātā neviens divs nemantos sarkano krāsu, jo vecāks satur vairāk nekā 1 bērnu (3 nenosauktie divi).
Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 4 | 3.5 | 9 | 12 | 3.2 |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |