The Totally different Methods to Choose <html> in CSS

Temani Afif not too long ago did this train and I assumed I’d construct off of it. A few of these are helpful. Lots of them will not be. There’s a fowl on the finish!

`html`

html {
  /* I imply, duh */
}

`:root`

:root {
  /* Sarsaparilla, anybody? */
}

:root is a CSS pseudo-class that matches the basis component of the present (XML) doc. If the present doc is a HTML doc, then it matches <html>. The XML paperwork that you just’ll probably encounter as an internet developer (in addition to HTML) are:

SVG paperwork: :root matches <svg>
RSS paperwork: :root matches <rss>
Atom paperwork: :root matches <feed>
MathML paperwork: :root matches <math>
Different XML paperwork: :root matches the outermost component (e.g., <observe>)

However what’s the practicality of :root? Effectively, the specificity of pseudo-classes (0-1-0) is greater than that of parts (0-0-1), so that you’re much less prone to run into conflicts with :root.

It’s standard to declare international customized properties on :root, however I truly want :scope as a result of it semantically matches the worldwide scope. In observe although, it makes no distinction.

/* World variables */
:root { --color: black; }
:scope { --color: black; }

Let’s discuss :scope some extra…

`:scope` or `&`

:scope {
  /* Insert scope creep right here */
}

Okay, that’s not actually what :scope is for.

As I discussed, :scope matches the international scope root (<html>). Nevertheless, that is solely true when not used inside the newly baseline @scope at-rule, which is used to outline a customized scope root.

We will additionally do that:

& {
  /* And...? */
}

Usually, the & selector is used with CSS nesting to concatenate the present selector to the containing selector, enabling us to nest selectors even after we aren’t technically coping with nested selectors. For instance:

component:hover {
  /* This */
}

component {
  &:hover {
    /* Turns into this (discover the &) */
  }
}

component {
  :hover {
    /* As a result of this (with no &) */
  }
}

component :hover {
  /* Means this (discover the house earlier than :hover) */
}

component {
  :hover & {
    /* Means :hover component, however I digress */
  }
}

When & isn’t nested, it merely selects the scope root, which exterior of an @scope block is <html>. Who knew?

`‌:has(head)` or `:has(physique)`

:has(head) {
  /* Good! */
}

:has(physique) {
  /* Even higher! */
}

<html> parts ought to solely include a <head> and <physique> (à la Anakin Skywalker) as direct kids. Every other markup inserted right here is invalid, though parsers will sometimes transfer it into the <head> or <physique> anyway. Extra importantly, no different component is allowed to include <head> or <physique>, so after we say :has(head) or :has(physique), this may solely consult with the <html> component, until you mistakenly insert <head> or <physique> inside <head> or <physique>. However why would you? That’s simply nasty.

Is :has(head) or :has(physique) sensible? No. However I am going to plug :has(), and also you additionally realized concerning the unlawful issues that you just shouldn’t do to HTML our bodies.

`:not(* *)`

:not(* *) {
  /* (* *) are my starry eyes  CSS <3 */
}

Any component that’s contained by one other component (* *)? Yeah, :not() that. The one component that’s not contained by one other component is the <html> component. *, by the best way, known as the common selector.

And in case you throw a baby combinator proper in the course of them, you get a cute fowl: