CSS Target Selector Alternative Version

There is another way to implement .default target without regard to layout.

Take a look at this CSS:

/* Default */
#ru:not(:target) ~ .lang_switch *[lang]:not(:lang(en))
    display: none

/* Hide */
#ru:target ~ .lang_switch *[lang]:not(:lang(ru))
    display: none

#en:target ~ .lang_switch *[lang]:not(:lang(en))
    display: none

And HTML:

<div class="lang-selector">
    <div>
      <div lang="en">English text</div>
      <div lang="ru">Русский текст</div>
    </div>
    <div>
      <div lang="en">English text</div>
      <div lang="ru">Русский текст</div>
    </div>
</div>

Functionally it uses a different approach and there is no more default class. Instead of hiding/showing particular target, it hides elements of particular language that are within .lang-selector

This is one of the ways to implement language switch without use of JavaScript.

It requires you to specify rule for each target. And it is pretty limited to particular dual-language case.

How it works

By default it hides all child elements of .lang_switch without attribute lang="en"

If non-default target is chosen (i.e. #ru), the default rule will become disabled. Instead all child elements of .lang_switch without attribute lang="ru" will be hidden.

Overall it is rather complex way to use target selector.

It took a while for me and my friend Evgeny to come up with this idea.

Example

You can check out my CV to see how it works.

It is a hack

Definitely a nasty hack.

It can work with pre-processors, but regardless it might flood your CSS with lots of selectors.

And i'm not even sure how well it would scale on a more than 3 languages.