DEV Community

Cover image for Pure css ADV
Tamer
Tamer

Posted on

Pure css ADV

The last task assigned to me is to convert a js based adv component to pure css.

As always, the analysis was focused on what I could have lost by not using the js or on what the css would have "tied my hands".
I managed to keep every feature.

The strategy to achieve the desired result involves the arrangement of the elements on different z-index and the use of CSS Combinators (+ and ~).

I definitely excluded the links:target because, unlike the inputs, they do not allow the maintenance of the assigned stage if not their focus.
Furthermore, among the checkbox and the radio, the latter were the most appropriate solution to define a boolean stage.

Discussion (0)