The :root selector

The Selector :root

Selects the document’s root element (html element), just in case anyone notices it in the Improve Compatibility with Browser Fallbacks under Basic CSS.

I first thought it was a type, as it was not mentioned in any previous lessons to my knowledge, unless I have missed it.

Hi! @kris !
Here is an example of how to use css variables by :root selector.

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Hope it helps!

1 Like

Hi…
Imo it is a best practice to have more than one study resources.
in any chapter, if you feel that the chapter is not completely answering your doubts feel free to post a question in forum.
or search online!

1 Like

The order of the challenges should be changed. The :root selector is explained in the next challenge. One option would be to just move the two fallback challenges to the very end so we keep them grouped but do not introduce the selector before it has been explained. I don’t think changing the order affects anything else.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.