What is the use of the pseudo class :root?

Asked

Viewed 1,616 times

10

I’m learning about pseudo structural classes, but I haven’t found an article about this pseudo class yet, and I only find it in English.

html css css3
  • 1

    Have any answers solved what was in doubt? Do you need something else to be improved? Do you think it is possible to accept it now?

2 answers

11


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

It can be used when you 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 place than the :root can be interesting for XML structures when it will apply XSLT, XSLT are style and structure files for XSL (not to be confused with XLS which is an office document format) which 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, with conditions such as IF and FOR.

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

7

CSS doesn’t necessarily have to be applied to HTML, right? It’s a way of styling documents. How to refer to the element that gives rise to all 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 is the equivalent of <HTML>.

If it’s an SVG, then he’s the <SVG>.

Although it can be used in various types of documents, it only makes sense in those that fit stylization.

Documentation.

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.