¿Hay un selector CSS para nodos de texto?

173

Lo que me gustaría hacer (obviamente no en IE) es:

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

Lo que daría un margen de texto a un nodo. (¿Es eso posible?) ¿Cómo obtendría el nodo de texto con CSS?

css css-selectors Rudie
fuente
2
Puede aproximar el uso ::first-line, aunque como su nombre lo indica, solo se aplica a la primera línea de texto. (Además, creo que solo se podrían establecer algunas propiedades)
Mark Garcia

Respuestas:

114

Los nodos de texto no pueden tener márgenes ni ningún otro estilo aplicado a ellos, por lo que todo lo que necesite aplicar debe estar en un elemento. Si desea que parte del texto dentro de su elemento tenga un estilo diferente, envuélvalo en una spano div, por ejemplo.

Jacob
fuente
58
Sin embargo, me faltan desesperadamente :: before y :: after en los nodos de texto.
shabunc
66
I'm nevertheless desperately missing ::before and ::after on text nodes.En efecto. Puede que no tomen formato, pero ciertamente lo hacen content.
Synetech
12
Es una pregunta perfectamente razonable preguntar cómo apuntar a un nodo de texto. Me doy cuenta de que el OP específicamente dijo "margen", pero hay otros estilos que se pueden aplicar a un nodo de texto y que es posible que desee aplicar a un nodo de texto y no al nodo principal. Por ejemplo, digamos que quería un borde inferior debajo del texto. Aplicar ese borde inferior al nodo de texto tendría el resultado deseado, pero aplicarlo para decir el div padre, crearía un borde inferior alrededor del div completo. Desafortunadamente, CSS no le permite apuntar al nodo de texto agregando elementos HTML ... al menos a partir de ahora.
VKK
1
puede configurar la fuente, ciertamente funciona, pero cualquier otro estilo no aplicado
Hamid Bahmanabady
Solo puede hacer cosas como esta para un stackoverflow.com/questions/10645552/…
fearis
50

No puede apuntar a nodos de texto con CSS. Estoy contigo; Desearía que pudieras ... pero no puedes :(

Si no ajusta el nodo de texto <span> como sugiere @Jacob , en su lugar, podría dar el elemento circundante paddingen lugar de margin:

HTML

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

CSS

p#theParagraph
{
    border: 1px solid red;
    padding-bottom: 10px;
}
Richard JP Le Guen
fuente