:rootSelector vă permite să direcționați elementului cel mai înalt nivel „părinte“ , în DOM, sau arborele de documente. Este definit în specificațiile CSS Selectors Level 3 ca o „pseudo-clasă structurală”, ceea ce înseamnă că este folosit pentru stilizarea conținutului pe baza relației sale cu conținutul părinte și frate.
În majoritatea covârșitoare a cazurilor pe care este probabil să le întâlniți, :rootse referă la elementul dintr-o pagină web. Într-un document HTML, htmlelementul va fi întotdeauna părintele de cel mai înalt nivel, astfel încât comportamentul lui :rooteste previzibil. Cu toate acestea, deoarece CSS este un limbaj de stil care poate fi utilizat cu alte formate de documente, cum ar fi SVG și XML, :rootpseudo-clasa se poate referi la diferite elemente în aceste cazuri. Indiferent de limbajul de marcare, se :rootva selecta întotdeauna elementul cel mai de sus al documentului în arborele documentului.
În exemplul de mai jos, :rootselectorul de pseudo-clasă este utilizat pentru a crea o culoare de fundal în spatele elementului. În acest caz, același efect ar putea fi obținut folosind în schimb htmlselectorul de elemente din CSS.
Puncte de interes
- În timp ce
:rootselectorul șihtmlselectorul vizează ambele elemente HTML, poate fi util să știți că de:rootfapt are o specificitate mai mare. Selectorii pseudo-clase (dar nu și pseudo-elementele) au o specificitate egală cu cea a unei clase, care este mai mare decât un selector de elemente de bază.
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Da | Da | Da | 9.5+ | IE9 + | Da | Da |