229

What I would like to do (not in IE obviously) is:

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

Which would give a text node a margin. (Is that even possible?) How would I get the text node with CSS?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Rudie
  • 52,220
  • 42
  • 131
  • 173
  • 4
    You could approximate using `::first-line`, though as the name suggests, it only applies to the first line of text. (Also, I think only some properties could be set on it) – Mark Garcia Aug 06 '14 at 06:19
  • Currently it's not possible, there are some [discussions](https://github.com/w3c/csswg-drafts/issues/2208) about adding it to CSS, but it's far from getting it. – Mariusz Pawelski Aug 31 '23 at 10:03

3 Answers3

145

Text nodes cannot have margins or any other style applied to them, so anything you need style applied to must be in an element. If you want some of the text inside of your element to be styled differently, wrap it in a span or div, for example.

Jacob
  • 77,566
  • 24
  • 149
  • 228
  • 71
    I'm nevertheless desperately missing ::before and ::after on text nodes. – shabunc Apr 08 '13 at 16:31
  • 11
    `I'm nevertheless desperately missing ::before and ::after on text nodes.` Indeed. They may not take formatting, but they certainly take `content`. – Synetech Jul 06 '15 at 22:12
  • 18
    It's a perfectly reasonable question to ask how to target a text node. I realize the OP specifically said "margin" but their are other styles which can be applied to a text node and which you might want to apply to a text node and not the parent node. For example, say I wanted a border bottom underneath the text. Applying that border bottom to the text node would have the desired result, but applying it to say the parent div, would create a bottom border around the whole div. Unfortunately of course, CSS doesn't let you target the text node with adding HTML elements... at least as of now. – VKK May 31 '16 at 04:58
  • 1
    you can set font for it, certainly works, but any other style not applied – Hamid Bahmanabady Feb 05 '17 at 10:54
  • You can only do stuff like this for a now https://stackoverflow.com/questions/10645552/is-it-possible-to-use-an-input-value-attribute-as-a-css-selector – fearis Oct 02 '18 at 11:20
69

You cannot target text nodes with CSS. I'm with you; I wish you could... but you can't :(

If you don't wrap the text node in a <span> like @Jacob suggests, you could instead give the surrounding element padding as opposed to margin:

HTML

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

CSS

p#theParagraph
{
    border: 1px solid red;
    padding-bottom: 10px;
}
jbyrd
  • 5,287
  • 7
  • 52
  • 86
Richard JP Le Guen
  • 28,364
  • 7
  • 89
  • 119
13

Text nodes (not wrapped within specific tags) can now be targeted in very specific use cases using the ::target-text pseudoelement selector. A query parameter (url-encoded; e.g. whitespace must be encoded as %20) that matches a string of text can be styled like this:

::target-text { /* color, background color, etc */ }

Just like other highlight pseudoelements, only certain style properties are supported, as listed here.

There is a demo for this (parent link is on the MDN page for ::target-text). Change the query parameter string for 'text' to different strings to see how different text becomes styled.

One limitation of the ::target-text pseudoelement selector is that only the first matching string of text can be styled. In addition, at 67.8%, browser support is modest as of January 2022.

CSSBurner
  • 1,565
  • 15
  • 13