¿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

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

Sin embargo, me faltan desesperadamente :: before y :: after en los nodos de texto.

— shabunc

I'm nevertheless desperately missing ::before and ::after on text nodes.En efecto. Puede que no tomen formato, pero ciertamente lo hacen content.

— Synetech

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

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

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