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

173

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 obtenir le nœud de texte avec CSS?

css css-selectors

— Rudie
source

Vous pouvez utiliser une approximation ::first-line, bien que comme son nom l'indique, cela ne s'applique qu'à la première ligne de texte. (De plus, je pense que seules certaines propriétés pourraient y être définies)

— Mark Garcia

Réponses:

114

Les nœuds de texte ne peuvent pas avoir de marges ou tout autre style appliqué, donc tout ce dont vous avez besoin d'un style doit être appliqué dans un élément. Si vous souhaitez qu'une partie du texte à l'intérieur de votre élément ait un style différent, enveloppez-la dans un spanou div, par exemple.

— Jacob
source

Je manque néanmoins désespérément :: before et :: after sur les nœuds de texte.

— shabunc

I'm nevertheless desperately missing ::before and ::after on text nodes.En effet. Ils peuvent ne pas prendre le formatage, mais ils prennent certainement content.

— Synetech

C'est une question parfaitement raisonnable de se demander comment cibler un nœud de texte. Je me rends compte que l'OP dit spécifiquement «marge» mais il existe d'autres styles qui peuvent être appliqués à un nœud de texte et que vous voudrez peut-être appliquer à un nœud de texte et non au nœud parent. Par exemple, disons que je voulais une bordure en bas sous le texte. L'application de cette bordure en bas au nœud de texte aurait le résultat souhaité, mais en l'appliquant pour dire le div parent, créerait une bordure inférieure autour du div entier. Malheureusement, bien sûr, CSS ne vous permet pas de cibler le nœud de texte en ajoutant des éléments HTML ... du moins pour le moment.

— VKK

vous pouvez définir la police pour cela, fonctionne certainement, mais aucun autre style n'est appliqué

— Hamid Bahmanabady

Vous ne pouvez faire des choses comme ça que pour un stackoverflow.com/questions/10645552/…

— craint

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

Si vous <span> n'entourez pas le nœud de texte comme le suggère @Jacob , vous pouvez à la place donner l'élément environnant paddingplutôt que margin:

HTML

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

CSS

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

— Richard JP Le Guen
source