Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Experimental CSS Pseudo-Classes and Pseudo-Elements

DZone's Guide to

Experimental CSS Pseudo-Classes and Pseudo-Elements

In this post, I'll dig a bit deeper and show some experimental CSS pseudo-classes and pseudo-elements that will soon provide lots of new possibilities for devs.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

In my previous article, I've showcased new HTML and CSS features to look forward to in 2018. In this post, I'm digging a bit deeper and showing some experimental CSS pseudo-classes and pseudo-elements that will soon provide lots of new possibilities for developers.

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="you@email.com">

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

::placeholder {
  color: #ddd;
}
Compatibility

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

Topics:
css ,web dev ,pseudo-classes ,pseudo-elements

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}