Clearleft
  • Services
  • Work
  • Thinking
  • Events
  • About
  • Contact

Primary Navigation

  • Services
  • Work
  • Thinking
  • Events
  • About
  • Contact
Thinking

Creating a toggle feature using :checked pseudo class.

Recently I became familiar with :checked, a pseudo class which allows you to dynamically change the CSS of an element based on it’s state. Using :checked and :not (the negation pseudo class), I built a tooltip toggle feature. I think it’s a pretty awesome use of pseudo classes, so I’m going to share it.

By Charlotte Jackson

10 March 2015

A designer is wearing a bold patterned shirt and glasses. He is sitting with a woman with long dark hair. Both are smiling and looking at a screen on a desk. Two more laptop screens can be seen in the foreground while in the background is a blurred out studio office kitchen.

You’re unique

Which is why we prefer to tailor our approach specifically for you. Let’s discuss a collaborative partnership and how we can achieve the best outcomes together.

Richard Rutter
Email Rich about your design challenge

Richard Rutter, Cofounder

  • The team
  • Join us
  • Hire us
  • Podcast
  • Privacy
  • Equal opportunities
  • Sustainability policy
  • 68 Middle Street Brighton BN1 1AL United Kingdom
  • info@clearleft.com

Copyright © 2005-Now Clearleft Ltd. All Rights Reserved.

Sign up to our newsletter

Every two weeks we send out a newsletter. It's a round-up of latest news and handpicked hyperlinks covering design, technology, and culture.