Modifier le CSS de tout texte sans toucher à sa balise HTML

Bonjour,

J'ai assigné (via CSS) un curseur personnalisé au body d'une page¹. Ce qui fait que le pointeur apparaît partout, même au survol du texte. Ceci m'embête un peu, d'autant que sur les liens, le curseur change tout à fait normalement. Je me suis dis : "Comment faire la même chose pour le survol du texte ?" J'ai donc tenté via CSS, d'assigner le curseur "text" à tous les p,ul,ol,dl,table,blockquote,pre,h1,h2… Mais dans ce cas, le curseur texte apparaît même lors du survol d'un espace vide au sein des balises de type texte. Je me demande s'il y a un moyen de retrouver un comportement normal du curseur…

Je pensais au JavaScript, qui identifie tout texte, en soi, comme un nœud du DOM. Mais je ne m'y connais pas assez en JS pour sélectionner tous les nœuds texte du DOM. Peut-être qu'il n'y a pas de formule pour ça et qu'il faut faire une boucle, mais là je sèche aussi.

Merci d'avance pour vos avis.

Une petite piste avec du Javascript :

Tout le body :

1

document.body.style.cursor = 'help';

Par ID (id="foo") :

1

document.getElementById('foo').style.cursor = 'help';

Par class (class="toto") :

1

document.getElementsByClassName('toto')['0'].style.cursor = 'help';

Par balise (<p>) :

1

document.getElementsByTagName('p')['0'].style.cursor = "help"

Pour ces 2 dernières, il faut mettre obligatoirement un indice (['0'] dans les exemples ci-dessus). Lorsque que l'on veut récupérer toutes les balises concernées, il faut faire une boucle :

1
2
3
4
5
6

// Récupération des éléments concernés
var elems = document.getElementsByTagName('p');
// Boucle à partir du nombre d'éléments récupérés
for (var i=0; i<elems.length; i++) {
 elems[i].style.cursor = 'help';
}

Merci pour ces pistes, j'ai bien compris l'idée.

Mais le nœud #text (cf. l'arbre du DOM) ne semble pas pouvoir être concerné par des règles CSS. J'ai bien essayé d'appliquer du style via JS de cette manière :

1
2
3
4
5

// Récupération des éléments concernés
var ptxt = document.getElementsByTagName('p');
// Boucle à partir du nombre d'éléments récupérés
for (var i=0; i<ptxt.length; i++) {
ptxt[i].firstChild.style.cursor = 'text';

Sans résultat.

Il doit pourtant y avoir un moyen : le navigateur affiche par défaut le curseur "text" au survol du texte uniquement !

En effet, pas possible, dommage. [Edit: Ou alors peut-être qu'en ajoutant des <span> avec une classe spéciale pour tout nœud texte à l'aide de JS, on obtiendrait quelque-chose… Mais ça produirait un code moche. J'y renonce. ]

Merci beaucoup pour ces explications précises en tout cas, j'ai tout compris. Et encore merci à EtienneR pour son aide.

Tiens, je viens de tomber là-dessus. C'est un peu hors-sujet, mais tant pis : http://css-cursor.techstream.org

Pas de problème, tu m'as fait découvrir cursor:cell; et cursor:alias;.