Question

Is it possible to create a page which changes on click on various elements and bind multiple events to various elements of the page without using any javascript?

Answer 1

Yes, it is, there are multiple ways to do this, it can be done using :focus, :active, :checked. View demo.

Following is an example using :checked why I choose this over the others is because it simplifies writing css rules and allows me to use multiple elements to interact with it from various places. But enough talking, the html:

<input type="checkbox" id="cb1" /><span>This will change color</span>

and the css:

span { color: red; }
input:checked + span { color: blue; }

You may say that checkboxes are ugly and they don’t look the same on all browsers, that is true, but you don’t have to display them, you can use a label with a for attribute to affect the state of the checkbox, for the previous example this can be achieved using:

<label for="cb1">Click here to toggle checkbox</label>

Ok, but now you may think things get complicated because you use 2 elements instead of one, yes, but at the same time, due to the fact that <label for="id"> selects an element by id you can place your label anywhere you like in the document, and more than that you can use multiple labels to change the state of the same input. and you can give them their own ids or classes and style them differently as well if you want.

Even more is that you can combine multiple input’s states and add a rule on that if you’d like to which, from what I know is currently not available with any other pure HTML + CSS solution.

For a more complicated example and even a micro-demo of a lightbox like effect achieved using this see this fiddle.