pseudo-sélecteur pour les majuscules/mots?

Question

Existe-t-il un pseudo-élément CSS pour les majuscules/lettres/mots? Je veux que toutes mes capitales soient plus petites et tous les autres personnages de la même taille. Une capitale n'est pas nécessairement le premier caractère d'une phrase (ou d'un mot) ni l'inverse. Ou peut-être existe-t-il une autre façon de trouver ces caractères en CSS? Avec un truc? J'aime les trucs.

Answer 1

Eh bien, il y a le pauvre sélecteur first-letter, mais ce n'est pas ce que vous voulez.

Vous pouvez bien sûr également pré-analyser votre code HTML en PHP, en enveloppant toutes les majuscules dans les tags <span class="capital"></span>, mais c'est un hack.

Ensuite, bien sûr, vous pouvez toujours retirer le lapin magique jQuery et modifier votre DOM au chargement du document pour inclure les travées. C'est aussi un hack. Aimez-vous les hacks?

Voyons voir qui tourne autre avec un tour de magie :-)

Answer 2

Je ne pense pas que ce soit possible.

Mieux vaut juste envelopper les majuscules avec une plage avec une classe et l'utiliser pour les styler.

Answer 3

Ceci est impossible en utilisant le CSS.

Vous pouvez utiliser Javascript pour vérifier tous les caractères de votre texte en majuscules (par exemple en utilisant if (yourtext == yourtext.toUpperCase())), puis envelopper un <span> autour d'eux contenant votre CSS pour les styler.

Ou quelque chose autour de ces lignes: (peut-être quelqu'un a le temps de créer un jsFiddle avec ce)

function wrapCaps() { 
    var text = document.getElementById("my_text").value; 
    for(i=0; i < text.length; i++) { 
     if(text[i].charCodeAt(text[i]) >= 65 && text[i].charCodeAt(text[i]) <= 90) 
     wrapNode(text[i], 'span'); 
    } 
} 

Je n'ai pas essayé, vous devrez peut-être utiliser replaceNode ou quelque chose comme ça. La méthode charCodeAt recherche uniquement les majuscules. Veuillez noter qu'aucun caractère Unicode, tel que des majuscules grecques spéciales, ne sera inclus.
Vous devez maintenant seulement le style de votre portée avec quelque chose comme:

#my_text span { 
    font-size: 10px; 
}