How to use CSS first-child but excluding text content

Question

This snippet doesn't work the way I expect:

div li span:first-child {
  font-weight: bold;
}

<div>
  <ul>
    <li><span>This is a test</span></li>
    <li>And <span>this is also a test</span></li>
  </ul>
</div>

Both span elements are bold. I would have expected the 2nd one to not be bold, because it follows the plaintext "And ", but I guess :first-child doesn't consider text content to be a child.

Is there a way to differentiate these two situations, and select elements which are not preceded by any content or siblings?

To clarify: In my specific case, I want to make a <span> element in each <li> element bold, but only if it's right at the beginning of the <li> and not preceded by any text or other elements.

So you want to bold the list items where there's nothing between the opening span element and the opening last element? — j08691, Aug 22 '16 at 20:58
another question and [answer](http://stackoverflow.com/a/5688779/769780) says you can't target text nodes with css. that was a little while ago, but it looks like nothing's changed since then. so i'm not sure you can use pseudoclasses to help identify spans with or without preceding text nodes. — worc, Aug 22 '16 at 21:01
The short answer is no, you can't differentiate based on text nodes/content. Targeting text nodes with CSS is not defined even in the working draft of the future CSS4: https://www.w3.org/TR/selectors4/ — skyline3000, Aug 22 '16 at 21:14
NOT A DUPLICATE -- I want to select an element with css, not a text node. — Jason S, Aug 22 '16 at 23:06
@JasonS I don't think there's a selector to exclude text, but there is one that works for everything else. The pseudo-class selector `:only-child`. It has quite nice support, even IE9. Here's a [**demo**](https://jsfiddle.net/rickyruizm/edj973ur/). More info [here.](http://tympanus.net/codrops/css_reference/only-child/) — Ricky Ruiz, Aug 22 '16 at 23:54
Why can't you just wrap `And` in a `
` or something equivalent? — , Aug 23 '16 at 06:15
@RicardoRuiz How does `only-child` help here? The `` is the only child in both cases. — , Aug 23 '16 at 06:18
@torazaburo in the part where he says "select elements which are not preceded by any content or siblings"??? — Ricky Ruiz, Aug 23 '16 at 06:19
@torazaburo this question was marked as duplicate and then the op clarified. What he wants now is different than what he stated in the beginning, or at least it seemed that way. — Ricky Ruiz, Aug 23 '16 at 06:29

score 3 · Accepted Answer · answered Aug 22 '16 at 21:06

As far as I can tell, no, you cannot differentiate between elements with or without a sibling text node using CSS alone:

div li span:first-child {
  font-style: italic;
}

div li:first-child span {
  font-weight: bold;
}

div li:empty span:first-child {
  color:red;
}

div li span:only-child {
  font-size: 20px;
}

<div>
  <ul>
    <li><span>This is a test</span></li>
    <li>And <span>this is also a test</span></li>
    <li><span>another test</span></li>
  </ul>
</div>

Tyler Roper · Answer 2 · 2016-08-22T21:05:32.737

0

Your code will apply the style to any span element that is the first child of its parent. In both cases, your span is the first child of its parent li.

You don't want the first child span in this case, you want the first child li.

div li:first-child span {
  font-weight: bold;
}

EDIT: I seem to have misunderstood your question, as it more relates to why the second span is bold, despite being preceded by text. As you presumed, text is not seen as a child element as the text node is technically part of its parent li. Your code will work in the case of defined DOM siblings like other <div>s or <span>s, however I am not sure there's a sufficient way to say "If preceded by any text" without implementing javascript.

edited Aug 22 '16 at 21:05

answered Aug 22 '16 at 20:57

Tyler Roper

21,445
6
33
56

You're right, you misunderstood; I want to make a `` element in each `
` element bold, but only if it's right at the beginning of the `
` element.

Jason S

Aug 22 '16 at 23:10

*text is not seen as a child element as the text node is technically part of its parent `

`* To be precise, text is not seen as a child element because it's not an element at all.

– Aug 23 '16 at 06:19

score 0 · Answer 3 · answered Aug 23 '16 at 06:21

0

To not target the span if it's not the very first thing under its parent, just wrap the And as follows:

<div>
  <ul>
    <li><span>This is a test</span></li>
    <li><div style="display: inline: ">And</div> <span>this is also a test</span></li>
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  </ul>
</div>

answered Aug 23 '16 at 06:21

Thanks but I can't control the HTML directly in my case, so no, I can't do this. – Jason S Aug 23 '16 at 18:29
Then you have no choice but to use JS. – Aug 24 '16 at 02:51

score -2 · Answer 4 · answered Aug 22 '16 at 20:58

-2

You just have to twist your code a little:

div li:first-child  span{
  font-weight: bold;
}

answered Aug 22 '16 at 20:58

Vcasso

1,328
1
8
14

No, I don't want to select the first `li` element, I want to select the `span` element within the `li` element *if* it is the first child of the `li`. – Jason S Aug 22 '16 at 23:09

How to use CSS first-child but excluding text content

4 Answers4

Linked

Related