How to select text within li using css

Question

I have following HTML markup

How do i select text inside this

As you can see inside that

there is a div i dont want to affect contents on that div.

Also http://stackoverflow.com/questions/5080365/css-to-prevent-child-element-from-inheriting-parent-styles — CalvT, Jun 22 '16 at 14:05

score 2 · Answer 1 · answered Jun 22 '16 at 14:01

2

Text nodes can't be selected with CSS. You have to give some rules to the li, and then give rules to the div inside the li to override the styles that it gets from its parent, or wrap the text on some other element like a span.

answered Jun 22 '16 at 14:01

Jose Manuel

165
2
8

score 1 · Accepted Answer · answered Jun 22 '16 at 14:00

1

You can't select only that text. So style the div too:

ul,
li div {
  color: black;
}
li {
  color: green;
}

<ul>
  <li>
    Text
    <div>Div Text</div>
  </li>
  <li>
    Text
    <div>Div Text</div>
  </li>
</ul>

answered Jun 22 '16 at 14:00

CalvT

3,123
6
37
54

score 1 · Answer 3 · answered Jun 22 '16 at 14:01

1

With the regular CSS methods you can't do that.

I suggest to put a <span> around it and assig a class to it which you can style.

answered Jun 22 '16 at 14:01

Johannes

64,305
18
73
130

That worked, thank you for the suggestion. – octopus Jun 22 '16 at 14:33

How to select text within li using css

3 Answers3