Селектор класса CSS для выбора текста внутри div

Question

У меня есть div с именем класса "test". Класс «test» имеет назначенный ему указатель курсора. Класс также имеет фиксированную ширину 200 пикселей. Внутри div находится текст длины, который меньше ширины div. Я не хочу, чтобы точка появлялась, когда мышь помещена в пустую часть div.

Есть ли способ, которым я могу назначить указатель css на текст внутри div, не заключая текст в другой тег <span>. Я просто не хочу возвращаться и добавлять тег span к каждому отдельному div и переписывать javascript.

Я думаю о чем-то вроде этого псевдо-CSS-кода

.test.text {
  cursor:pointer;
}

Answer 1

CSS не работает таким образом. Как говорится в комментариях biziclop, текстовые узлы нельзя выбрать с помощью CSS . Вам придется либо обернуть текст в <span> и использовать

.test span {
    cursor: pointer;
}

С

<div class="test">
    <span>Text</span>
</div>

Или установите .test на display: inline, но это не позволит вам задать ширину, а это не то поведение, которое вам нужно. <span> с в порядке, в этом случае.

Answer 2

Вы можете попробовать использовать псевдоэлементы :before или :after.

Я играл с этим решением, для 1-строчных делений:
http://jsfiddle.net/yAfKw/

Многострочные div:
http://jsfiddle.net/yAfKw/1/

Работает в Firefox, не работает в Safari.