What is the pseudo class's usefulness: root?

Question

What is the pseudo class's usefulness: root?

Navigation

#1 by (11 votes)
#2 by (7 votes)

8

I'm learning about pseudo-structural classes, but I have not found an article about this pseudo-class yet, and I've only found it in English.

html css css3

asked by anonymous 12.12.2016 / 22:15

2 answers

7

CSS does not necessarily have to be applied to HTML, right? It is a way of styling documents. As a reference to the element that gives rise to all the others? That is what is in generic term the element that contains all or others? This element is known as :root .

If you are using an HTML page it is the equivalent of <HTML> .

If it is an SVG, then it is <SVG> .

Although it can be used on many types of documents, it only makes sense in styling.

Documentation .

12.12.2016 / 23:04

Netbeans project with git and Composer repository How to create and read ".conf" files in C, for linux environment?

score 11 · Accepted Answer

The :root in html documents will always refer to the <html> element, because even if you create a "custom" element instead of <html> the browser engine will always generate the HTML again. >

It can be used when you are going to share a CSS in more than one document type, such as an HTML and an XML that can be customized, an example is SVG:

global.css

:root {
  /*estilo que vai servir para vários documentos*/
}

SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <link href="global.css" type="text/css" />

  <rect x="10" y="10" height="100" width="100"
      style="stroke:#ff0000; fill: #0000ff"/>
</svg>

html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="global.css" type="text/css">
</head>
<body>
</body>
</html>

Another location that :root might be interesting for XML structures when it will apply XSLT , the XSLT are style and structure files for XSL (not to be confused with XLS which is an office document format) that this in turn is an HTML structure embedded in an XML, basically XSLs are XMLs that can transform their XML into something visual equivalent to HTML, having conditions like IF and FOR.

As an XML developer can have different documents with different elements superior and still use a same CSS :root can help to encompass all (although I'm almost sure that all XSL is converted to HTML by the browser engine)