How Do CSS Radio Tabs Work?

Could someone explain how the last part of the code works? Specifically: [type=radio]:checked { } [type=radio]:checked ~ .content { z-index: 1; } I'm just starting with CSS as a

Solution 1:

The last part of your CSS:

[type=radio]:checked  {
}

[type=radio]:checked ~ .content {
  z-index: 1;
}

This is giving a z-index to the class content. Since only one tab is clicked it is giving a z-index to only one content class and that makes it display. (Since no others have a z-index)

If you want to see how it works then add a z-index to the content class, lets say 10, in your CSS and watch how it gets all screwy. Now since that code is only giving a z-index: 1; it doesn't display correctly since they all have 10 in this example. Now go to the above snidbit of code and put a z-index: 11; and watch how it works correctly. Since only one gets a high z-index: 11; it becomes the displaying one.

If you don't know what the [type=radio]:checked means, it is pertaining to an active state or clicked state for that radio input.

This part of code: [type=radio]:checked ~ label ~ .content is allowing a more distinguished and precise selection of a DOM element. It will work without it because .content is below the radio tag. It will only apply to an element that is 1. input radio > 2. label > 3. .content.

If you also don't know what z-index does then let me know and I'll brake that down.