233 votes

Existe-t-il un sélecteur CSS pour les nœuds de texte ?

Ce que je voudrais faire (pas dans IE évidemment) est :

p:not(.list):last-child + :text {
  margin-bottom: 10px;
}

Ce qui donnerait une marge à un nœud de texte. (Est-ce même possible ?) Comment pourrais-je obtenir le nœud de texte avec CSS ?

4 votes

Vous pourriez utiliser approximativement ::first-line mais, comme son nom l'indique, elle ne s'applique qu'à la première ligne du texte. (De plus, je pense que seules certaines propriétés peuvent être définies).

146voto

Jacob Points 33729

Les marges ou tout autre style ne peuvent pas être appliqués aux nœuds de texte. Par conséquent, tout ce à quoi vous devez appliquer un style doit se trouver dans un élément. Si vous souhaitez qu'une partie du texte à l'intérieur de votre élément soit stylisée différemment, enveloppez-le dans une balise span o div par exemple.

71 votes

Je manque néanmoins cruellement de ::before et ::after sur les nœuds de texte.

13 votes

I'm nevertheless desperately missing ::before and ::after on text nodes. En effet. Ils ne prennent peut-être pas de formatage, mais ils prennent certainement content .

19 votes

C'est une question parfaitement raisonnable que de demander comment cibler un nœud de texte. Je réalise que le PO a spécifiquement dit "marge" mais il y a d'autres styles qui peuvent être appliqués à un noeud de texte et que vous pourriez vouloir appliquer à un noeud de texte et non au noeud parent. Par exemple, disons que je veux une bordure inférieure sous le texte. L'application de cette bordure inférieure au nœud de texte donnerait le résultat souhaité, mais son application à la division parent, par exemple, créerait une bordure inférieure autour de la division entière. Malheureusement, CSS ne vous permet pas de cibler le nœud de texte en ajoutant des éléments HTML... du moins pour l'instant.

69voto

Richard JP Le Guen Points 13306

Vous ne pouvez pas cibler les nœuds de texte avec CSS. Je suis d'accord avec vous ; j'aimerais que vous puissiez le faire... mais vous ne pouvez pas :(

Si vous n'enveloppez pas le nœud de texte dans une balise <span> comme le suggère @Jacob vous pourriez plutôt donner l'élément environnant padding à l'opposé de margin :

HTML

<p id="theParagraph">The text node!</p>

CSS

p#theParagraph
{
    border: 1px solid red;
    padding-bottom: 10px;
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X