Existe um seletor de CSS para nós de texto?

173

O que eu gostaria de fazer (não no IE obviamente) é:

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

O que daria uma margem ao nó de texto. (Isso é possível?) Como eu obteria o nó de texto com CSS?

css css-selectors

— Rudie
fonte

Você pode aproximar o uso ::first-line, embora, como o nome sugere, ele se aplique apenas à primeira linha do texto. (Além disso, eu acho que apenas algumas propriedades poderia ser definido nele)

— Mark Garcia

Respostas:

114

Os nós de texto não podem ter margens ou qualquer outro estilo aplicado a eles; portanto, qualquer coisa para a qual você precise aplicar estilo deve estar em um elemento. Se você deseja que um pouco do texto dentro do seu elemento tenha um estilo diferente, envolva-o em um spanou div, por exemplo.

— Jacob
fonte

No entanto, estou desesperadamente perdendo :: antes e :: depois nos nós de texto.

— shabunc

I'm nevertheless desperately missing ::before and ::after on text nodes.De fato. Eles podem não aceitar a formatação, mas certamente aceitam content.

— Synetech

É uma pergunta perfeitamente razoável perguntar como direcionar um nó de texto. Percebo que o OP disse especificamente "margem", mas existem outros estilos que podem ser aplicados a um nó de texto e que você pode querer aplicar a um nó de texto e não ao nó pai. Por exemplo, digamos que eu queira uma borda inferior embaixo do texto. Aplicar essa borda inferior ao nó de texto teria o resultado desejado, mas aplicá-lo para dizer a div pai, criaria uma borda inferior ao redor de toda a div. Infelizmente, o CSS não permite que você direcione o nó de texto com a adição de elementos HTML ... pelo menos a partir de agora.

— VKK

você pode definir a fonte para isso, certamente funciona, mas qualquer outro estilo não aplicadas

— Hamid Bahmanabady

Você só pode fazer coisas como esta para um agora stackoverflow.com/questions/10645552/...

— fearis

Você não pode direcionar nós de texto com CSS. Estou contigo; Eu gostaria que você pudesse ... mas você não pode :(

Se você não <span> agrupar o nó de texto como sugere o @Jacob , poderá fornecer o elemento circundante paddingem vez de margin:

HTML

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

CSS

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

— Richard JP Le Guen
fonte