Experimental CSS pseudo-classes and pseudo-elements

Please note that features described in this article are experimental and therefore aren’t working in all browsers, or require the use of vendor prefixes. Make sure to visit the compatibility links to know in which situation a particular pseudo-class or pseudo-element can be used.

::backdrop

In my latest CSS article, I’ve introduced you to the exciting new <dialog> HTML element. Since we can now create dialogs in native HTML, naturally the CSS spec is offering you new possibilities that go with this new element.

For instance, the experimental ::backdrop pseudo-class is allowing you to define a backdrop for your dialogs. The example below uses the pseudo-class to create a semi-transparent background on all <dialog> elements:

dialog::backdrop {
  background: rgba(255,0,0,.25);
}

→ Compatibility

:dir()

The :dir() CSS pseudo-class matches elements based on the directionality of the text contained in them.

This is especially useful when quoting languages that use a right to left display, such as Arabic. On this example, the direction of the text is specified within the HTML code:

<p dir="rtl">????? ???????</p>

Then a red background is applied using the :dir() pseudo-class:

:dir(rtl) {
  background-color: red;
}

→ Compatibility

:fullscreen

The :fullscreen CSS pseudo-class represents an element that’s displayed when the browser is in fullscreen mode.

The example below, taken from the MDN web docs is displaying a basic text:

<div id="fullscreen">
  <h1>:fullscreen Demo</h1>
  <p>This text will become big and red when the browser is in fullscreen mode.</p>
  <button id="fullscreen-button">Enter Fullscreen</button>
</div>

Using :fullscreen, we will display the text in big red letters when the browser is in fullscreen mode:

#fullscreen:fullscreen {
  padding: 42px;
  background-color: pink;
  border:2px solid #f00;
  font-size: 200%;
}

#fullscreen:fullscreen > h1 {
  color: red;
}

#fullscreen:fullscreen > p {
  color: darkred;
}

#fullscreen:fullscreen > button {
  display: none;
}

→ Compatibility

::placeholder

The ::placeholder pseudo element allows you to style the placeholder text of a form element. For this example, let’s start by considering a simple input type="email" field with a set placeholder:

<input type="email" placeholder="[email protected]">

Applying a light grey color to the placeholder is super simple using the ::placeholder pseudo element:

::placeholder {
  color: #ddd;
}

→ Compatibility