Speciální znaky v atributu class

V dnešních prohlížečích fungují jako názvy tříd prakticky všechny znaky s výjimkou těch, které se používají jako řídicí v CSS (.#{}(),;/*~> a podobně).

Ve standardním režimu jsou ještě nefunkční názvy tříd začínající číslicí. V quirku v Explorerech a starších Operách funguje i to.

<style>
.růžovoučký {background: pink; font-size: small}
</style>
<p class=růžovoučký>Růžovoučký odstaveček

Růžovoučký odstaveček

Lepší bizarnosti ale začínají s dalšími speciálními znaky:

1. Co třeba stylové pojmenování třídy stylující částku v EUR?

   .€ {color: blue}

2. Nebo pojmenování stylu pro vypsání teploty?

   <span class=°C>21 °C</span>

3. Proč používat pro zarovnání zdlouhavé třídy left nebo right?

   .← {text-align: left}
   .→ {text-align: right}

4. Podtrhávání odteď zásadně:

   ._ {text-decoration: underline}

5. A třída pro citace může vypadat:

   <p class=„“>Citovaný text.

6. A nakonec třeba třída bez třídy (pomocí nedělitelné mezery):

   . {padding: 1em}

   <p class= >Odstavec s paddingem.

Přestože to hezky funguje, asi není ideální takto třídy zapisovat. Jednak to může zaskočit HTML/CSS editor při obarvování syntaxe a jednak to může zaskočit člověka, co bude s kódem chtít pracovat, obzvláště nebude-li umět zapsat některé speciální znaky.

Test

Pokud daná třída funguje, bude zelená.

• Zadaná třída je „zlutoucka“.
• Zadaná třída je „1“.
• Zadaná třída je „1zlutoucka“.
• Zadaná třída je „žluťoučká“.
• Zadaná třída je „1žluťoučká“.
• Zadaná třída je „1_žluťoučká—třída“.
• Zadaná třída je „zlut666oucka“.
• Zadaná třída je „žluťo„uč“ká—třída“.
• Zadaná třída je „žluťoučká-třída“.
• Zadaná třída je „→“.
• Zadaná třída je „ “ (tvrdá mezera).
• Zadaná třída je „.“.
• Zadaná třída je „()“.
• Zadaná třída je „~“.
• Zadaná třída je „=“.
• Zadaná třída je „_“.
• Zadaná třída je „° C“.
• Zadaná třída je „€“.
• Zadaná třída je „÷×“.
• Zadaná třída je „_žluťoučká—třída“.
• Zadaná třída je „#“.