Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Advanced Selectors Additional Pseudo-Classes

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
Posted by SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

What is the root of a document?

Hi, I'm sorry, this question might seem trivial, but can anyone explain to me what the root of a document is. In this course Guil shows us that usually the root of an HTML document is, the html element. I get this what I'd like to understand better is, what is called the "root" of a document? How do we identify the "root" of a document? Say it was another document, not HTML, say css or php or some other, how do we identify. Can the root of a document change? If someone could just go a little deeper for me I'd really appreciate it. Thanks

3 Answers

Milan Milosevic
Milan Milosevic
6,647 Points

Basicly, root selector targets up highest level parent element, or lets say the parent of all the other elements :)

The one that wraps all the other elements. If you're styling html document, root will always be html tag.

FROM CSS-TRICKS :

The :root selector allows you to target the highest-level "parent" element in the DOM, or document tree. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

In the overwhelming majority of cases you're likely to encounter, :root refers to the <html> element in a webpage. In an HTML document the html element will always be the highest-level parent, so the behaviour of :root is predictable. However, since CSS is a styling language that can be used with other document formats, such as SVG and XML, the :root pseudo-class can refer to different elements in those cases. Regardless of the markup language, :root will always select the document's top-most element in the document tree.

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Hi Milan thanks for the rapid reply. I wasn't really concerned with the :root selector yet as I'm currently doing the course now. I just wanted to understand what the root of a document is. But after reading your response I was able to deduct, basically, that the root of a document is the top most element of a document tree. But as you're saying in a CSS document however it can refer to different elements. So I guess I'll get it as I go along, hopefully. Thanks again.