css class selector to select text inside a div
I have a div with a classname "test". The class "test" has a cursor pointer assigns to it. The class also has a fixed width of 200px. Inside the div is text of length that is shorter than the width of the div. I don't want the point to appear when the mouse is placed in the blank part of the div.
Is there a way that I can assign the css pointer to the text inside the div without wrapping the text inside another <span>
tag. I just don't want to go back and add the span tag to every single div and rewrite the javascript.
I am thinking of something like this pseudo css code
.test.text {
curso开发者_开发百科r:pointer;
}
CSS doesn't work this way. As biziclop says in the comments, text nodes can't be selected with CSS. You'll either have to wrap your text in a <span>
and use
.test span {
cursor: pointer;
}
With
<div class="test">
<span>Text</span>
</div>
Or set .test
to display: inline
, but that won't let you give it a width, which is not the behaviour you want. <span>
s are fine, in this case.
You could try using the :before
or :after
pseudo-elements.
I was playing with this solution, for 1-line divs:
http://jsfiddle.net/yAfKw/
Multi-line divs:
http://jsfiddle.net/yAfKw/1/
Works in Firefox, does not work in Safari.
精彩评论