Esiste un selettore CSS per i nodi di testo?

173

Quello che vorrei fare (non ovviamente in IE) è:

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

Il che darebbe un margine a un nodo di testo. (È anche possibile?) Come potrei ottenere il nodo di testo con CSS?

css css-selectors

— Rudie
fonte

Si può approssimare usando ::first-line, anche se come suggerisce il nome, si applica solo alla prima riga di testo. (Inoltre, penso che solo alcune proprietà potrebbero essere impostate su di esso)

— Mark Garcia

Risposte:

114

Ai nodi di testo non possono essere applicati margini o altri stili, pertanto qualsiasi elemento a cui è necessario applicare lo stile deve trovarsi in un elemento. Se vuoi che parte del testo all'interno del tuo elemento abbia uno stile diverso, avvolgilo in un spano div, ad esempio.

— Giacobbe
fonte

Mi manca disperatamente :: prima e :: dopo sui nodi di testo.

— shabunc,

I'm nevertheless desperately missing ::before and ::after on text nodes.Infatti. Potrebbero non accettare la formattazione, ma certamente lo accettano content.

— Synetech,

È una domanda perfettamente ragionevole chiedersi come scegliere come target un nodo di testo. Mi rendo conto che l'OP ha detto specificamente "margine", ma i loro sono altri stili che possono essere applicati a un nodo di testo e che potresti voler applicare a un nodo di testo e non al nodo principale. Ad esempio, supponiamo che volessi un bordo inferiore sotto il testo. Applicando quel bordo inferiore al nodo di testo si otterrebbe il risultato desiderato, ma applicandolo per dire il div genitore, si creerebbe un bordo inferiore attorno all'intero div. Sfortunatamente, ovviamente, CSS non ti consente di indirizzare il nodo di testo con l'aggiunta di elementi HTML ... almeno a partire da ora.

— VKK

puoi impostare il carattere per questo, sicuramente funziona, ma qualsiasi altro stile non applicato

— Hamid Bahmanabady,

Si può solo fare cose come questo per un ora stackoverflow.com/questions/10645552/...

— fearis

Non puoi scegliere come target nodi di testo con CSS. Sono con te; Vorrei che tu potessi ... ma non puoi :(

Se non <span> avvolgi il nodo di testo in un suggerimento simile a @Jacob , potresti invece dare l'elemento circostante paddinginvece di margin:

HTML

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

CSS

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

— Richard JP Le Guen
fonte