Let's talk about: checked

Recently, it seems that a lot of people are writing about creating tabs (tabs) on CSS.
Now I want to tell you about another way to create tabs on CSS (When warning attacks in my direction, I’ll mention that without: target).

But first things first.

: checked or some theory

So, in CSS3 (In the css3-selectors module) a new pseudo -class has appeared: checked.
In short, this pseudo-class is applied to those inputs (checkbox or radiobutton) that are set by the user to the state of choice (checked).
')

Tabs, tabs, tabs

Quite a few implementations of tabs have been described (for example, here done through the input type = "text" field set to readonly), but most of them relied on the pseudo-class: target, whose use is a bit unjustified due to the "jumping" content.

Because of what, a super-simple implementation of tabs was invented with the help of: checked and radiobuttons.

In order not to overload the reader with code, I cut the example from 4 tabs to 2, the full example is available here.

HTML:

<section> <input type="radio" id="tab1" name="radiobutton" checked="checked"/> <label for="tab1" class="tabs">qutIM 0.1</label> <input type="radio" id="tab2" name="radiobutton"/> <label for="tab2" class="tabs">qutIM 0.2</label> <article> qutIM 0.1 —  ,   2008 . </article> <article> qutIM 0.2 —  ,   2010 . </article> </section> 

CSS:

 input { display: none; } input:checked + label { background: #CCC; } input:checked + label + input + label + article { /* ? */ display: block; } input:checked + label + article + article { display: block; } article { display: none; } 

This code is devoid of all unnecessary styles, so as not to interfere with understanding.
Separately, I want to say that this is just an example of what can be done with CSS and HTML, because using this in real sites is difficult and here's why:
This code works correctly in Firefox, Opera, IE9 +, but does not work in Webkit browsers. and here I hurried a little.
WebKit does not update the value before changing the code, but you can force it to do this by adding a very dirty hack:

 section { -webkit-animation: 0.1s hack infinite; } @-webkit-keyframes hack { from {margin: 0; padding: 0;} to {margin: 0; padding: 0;} } 

An animation that does nothing. Webkit never ceases to amaze.

As you have noticed, I have repeatedly used the property of the selector of the next element, which, in general, is not recommended for use for performance reasons. But just below I will show this use of this selector, which I never dreamed of.

A little nonsense

And what if you use checkboxes to enter binary numbers?

We take two checkboxes, arrange them sequentially and do something like:

 input + div::after { content: "0"; } input:checked + div::after { content: "1"; } input:checked + input + div::after { content: "2"; } input:checked + input:checked + div::after { content: "3"; } 

Rave? Madness? Trolleybus.jpg? In fact, just a demonstration and some free time.
By the way, for half an hour, such a small script that generates a style (similar to the above) and a line from checkboxes for translation from binary to decimal :) was written
A little later, a similar script was written, generating a similar style, but for translation from ternary to decimal.
In HTML, there are tri-state checkboxes, but javascript is required to create them (to set the element indeterminate = true), and there is also a pseudo-class: indeterminate, by analogy with: checked.

Of course, there is no talk somewhere to apply it here by this method. All this is provided as information for consideration.

And more?

Here you can read a note for kizu authorship about drop-down menus based on the same principle.