moon indicating dark mode
sun indicating light mode

CSS action pseudo classes

June 13, 2021

Without JavaScript, dynamic UI is possible with just CSS action class selectors.

Case study

Help text for input element which is only visible when the input is focused.


<div class="input-cont">
<input type="text" placeholder="Focus me" autofocus />
<span class="help" data-help="Enter your email"></span>

To achieve the above, a span holding the help text in a data-help attribute as a sibling to the actual input. Both the input and the span are children to a parent div with class name input-cont.

The interaction(CSS)

The container would help to proper place the content, so a position relative is applied. Since multiple inputs can exist on a page, a margin-bottom is added to give a visual cue and separation.

.input-cont {
position: relative;
margin-bottom: 1rem;
input {
z-index: -1;

The Structure

Instead of additional element to hold the text, the ::before pseudo element is already available for container elements.

<input /> elements are not container which makes it difficult for this purpose, a span is placed next to the input element to provide the flexibility that ::before, ::after pseudo elements provide.

The +(direct sibling) selector can achieve selecting an element that lives under the same parent as the base selector. Since the input and the lives under the same parent, so gets the element, and the ::before gives access to its pseudo selector.

To ensure that the ::before pseudo element stay behind the input field, the z-index: -2 is applied to it, also, the content property is not set at the initial state of the element, making the element hidden by default.

input + .help::before {
bottom: 50%;
left: 0;
width: 100%;
font-size: 0px;
color: #707070;
opacity: 0;
position: absolute;
filter: blur(5px);
z-index: -2;

Toggling the help text

To show the help text when an element is hidden, the :focus psuedo selector is used to select an input that is focused, then the sibling selecor gives access to the element, which makes the pseudo element stylable.

Here, the content is set by picking it from the data-help attribute on the element, a final z-index: 0 is applied to bring the element on top of the input field, while the bottom: 60% pushes the element downward below the input field to avoid overlapping.

input:focus + .help::before {
content: attr(data-help);
opacity: 1;
filter: blur(0);
bottom: -60%;
z-index: 0;
font-size: 12px;

Find the above code on

And this is just a basic toggling and hiding of elements using :focus.

Many interesting things can be built with CSS user action selectors.

There are other action selectors are:

  • :active
  • :focus
  • :focus-within
  • :focus-visible
  • :hover


Edit on githubTweet

With 💗 by Aleem Isiaka.
Software Engineer >>> Computer && Machines | Learner && Writer