Default :target with CSS

Question

I have this CSS:

And this HTML:<

Answer 1

I know this is an old question, but it's still relevant and I have another suggestion:

Tab 1
Tab 2




Some content
Some other content

and the css:

.tab {display:none}

.default-tab {display:block}

:target ~ .default-tab {display:none}

#tab1:target ~ .tab1,
#tab2:target ~ .tab2 {
  display: block
}

This lets you have the tabs ordered however you want, but if you're generating the html dynamically you'll need to generate the css dynamically. Or else choose a maximum number of tabs to support when you write the css.