CSS Events ?!

It’s been a while since new pseudo-state-selectors were introduces to CSS. I would like to refer to some of them as “CSS Events”, since they represent, mostly, post-event states.

This post will demonstrate all “CSS Events” capabilities.

Before, some examples of CSS Events Capabilities:

• Example 1 — Toggle Flipped card use only CSS.
• Example 2 — Saving CSS State Position.
• Example 3 — Pure CSS Game.

Toggle Event

The trick of the toggle event is an hidden input of type checkbox, with connected label by ID, using the :checked pseudo class.

Example of the idea:

If input is checked, change it’s label by using adjacent-sibling-selector.

input:checked + label{/*others styles*/}

Base HTML & CSS

HTML

<input type="checkbox" class="toggle-box" id="toggle-box1">
<label for="toggle-box1" class="boxy">CLICK ME</label>

CSS

.boxy{
   /*box styles*/
   display:block;
   width:250px;
   height:250px;
   background-color:#ccc;

   /*animation listener*/
   transition:0.3s;
}
   
/*toggle changes*/
.toggle-box:checked + .boxy{
   transform:translateX(250px); /*change position of box*/
   background-color:#888; /*change color of the box*/
}

That’s it, we now have pure CSS Toggle with no JS.

When clicking on the element with the boxy class(label element), we trigger the checkbox to change state, checked or unchecked. And with the sibling selector we can respectively change the styles to to boxy class.

VIEW DEMO

just add this style to hide the checkbox:

.toggle-box{
   position:absolute; top:-99999px;
}

Click Event

The trick of the click event is using the target of an anchor tag (<a>), using the :target pseudo class.

.class-with-id-that-is-targeted:target{/*some styles*/}

Base HTML & CSS

HTML

<!--  link that will make the div element targeted -->
<a class="button" href="#Tab1-Cont">Item1</a>
                                 
<!-- targeted element when click on the link -->
<div class="box box1" id="Tab1-Cont">Item 1 Content</div>

CSS

.button{
   /*button styles*/
   width:120px;
   height:30px;
   border:solid 2px #000; 
}

.box{
   /*box styles*/
   width:200px;
   height:200px;  
   border:solid 1px #333;

   /*animation listner*/
   transition:0.3s;
}
/*box styles after click*/
.box:target{background-color:#660033; color:#fff;}

That’s it, we have a CSS Click Event with no JS. After Click the box will change its colors.

VIEW DEMO

On Click Event

The trick of the On Click event is using the :active pseudo class. It’s an old pseudo class that many of us developers, seem to have lost in the old bookmark packet.

.some-class-on-click:active{/*some styles*/}

Base HTML & CSS

HTML

<div class="box"></div>

CSS

.box{
   /*box styles*/
   width:200px; height:200px;
   background-color:#aaa;
   border:solid 2px #000; border-radius:20px;
   margin:0 auto;

   /*animation listner*/
   transition:1s;
}
/*On Click styles*/
.box:active{width:100px; height:100px;}

That’s it, we have a CSS OnClick Event with no JS. When Clicking the box it will get smaller.

VIEW DEMO

You can make more complicated things with that, like saving states! by adding a very long transition to the default rule, and a short one to the :active rule.

Example:

.box{transition:999999999s; }
.box:active{transition:5s; /*other changes styles*/}

Saving States With Pure CSS Example

On Focus & on Hover

Everybody know’s hover & focus events we use them, well, everywhere. The hover event is triggered when hovering with the mouse on an element, and the focus event when using the tab button to focus on links and buttons.

here is an example for the developers that aren't familiar with those events.

Base HTML & CSS

HTML

<button>button1</button>
<button>button2</button>
<button>button3</button>

CSS

button{font-size:30px;}
button:focus{background-color:green; color:white;}
button:hover{background-color:red; color:white;}

Now play with tabs and mouse hover on the buttons.

VIEW DEMO

Now Go Crazy!

With what we learned you can make really crazy stuff.

I made with those ideas a Pure CSS Game — VIEW GAME.

That’s all, I hope you enjoy it.

More CSS Posts I Wrote:
New CSS Logical Properties!
The New Responsive Design Evolution
CSS Architecture for Multiple Websites With SASS
The CSS Grid Methods
Becoming a CSS Grid Ninja!
Recommended CSS Videos, Channels and Playlists

Follow me on:
Twitter
My Company’s twitter

You Can find me in my Facebook groups:
CSS Masters
CSS Masters Israel