Menu en Smallcaps

Les petites capitales existent en HTML :
Ce texte est en Small Cap, grâce à la balise : 

<span style="font-variant: small-caps;"> 

Il devrait être possible de passer un menu en Small Cap facilement.

Mettons qu'on veuille transformer le sous-menu du fil d'Ariane : "" en "". Curieusement, j'ai éprouvé de grandes difficultés à trouver une méthode ! (car j'essayais de réaliser cela avec la "Marmelad", qui ne possède pas de variante smallcap…)

 

La solution est "très simple", voici le code :

#(ID de la page courante) li.cc-nav-current:nth-child(2) > a:nth-child(1) > span:nth-child(1)

{font-variant: small-caps!important;}

 



Modification de la première lettre d'un menu

Cibler la première lettre d'un élément est le rôle théoriquede la balise :first-letter. Mais elle n'est pas entièrement compatible avec Firefox, à moins de cibler, non pas le menu, mais la class qui affecte de menu.

Mettons que l'on veuille transformer le sous-menu "Première lettre" en "Première lettre"

Pour cibler le "P", je devrais pouvoir écrire (modifier le Head) :

#cc-nav-view-1995781198 > a:nth-child(1) > span:nth-child(1):first-letter.

Mais ça ne fonctionne pas forcément.

 

J'y suis parvenu sur ce site : cbe37.jimdo.com , grâce à au ciblage du menu par la class : 

.cc-nav-level-0.j-nav-level-0 :first-child:first-letter.

On peut voir sur l'image que le menu est en SmallCaps, bien que cette police Marmelad n'en possède pas.