Day 70: the defined pseudo-class

posted on December 30., 2022

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

---

:defined represents any element that has been defined. This includes standard elements and custom elements that have been successfully defined.

:defined {
  background-color: #000;
  color: #fff;
}

Standard elements

<p>I'm defined</p>
<small>I'm defined</small>

Undefined custom elements

<unde-fined>I'm not defined</unde-fined>

Defined custom elements

<de-fined>I'm defined</de-fined>

class BasicComponent extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('de-fined', BasicComponent);

Deprecated elements

  <center>test</center>
  <font>test</font>
  <blink>test</blink>

See on CodePen.

Further reading

• :defined - CSS: Cascading Style Sheets (MDN)

Want more?

1. Previous post: Day 69: width in container queries

Overview: 100 Days Of More Or Less Modern CSS

My blog doesn't support comments yet, but you can reply via e-mail.