Apply class to text without inline span

Question

So I have an unordered list with each li containing an image and text. At a particular breakpoint I'm hiding the text but keeping the image displayed. Is there a way to target only the text without putting a span around it? I'm currently using a span to give it display none, which works fine. I just wanted to see if someone has a more efficient way of doing this.

<ul>
        <li><a href="#" class="btn_task"><img src="images/ICON-XS-tasks.png" /> <span>Tasks</span></a></li>
        <li><a href="#" class="btn_note"><img src="images/ICON-XS-notepad.png" /> <span>Notes</span></a></li>
        <li><a href="#" class="btn_list"><img src="images/ICON-XS-lists.png" /> <span>Lists</span></a></li>
        <li><a href="#" class="btn_outline"><img src="images/ICON-XS-outlines.png" /> <span>Outlines</span></a></li>
    </ul>

@media (max-width: 500px) { ul li span {display: none;}}

possible duplicate of [Is there a CSS selector for text nodes/elements?](http://stackoverflow.com/questions/5688712/is-there-a-css-selector-for-text-nodes-elements) — showdev, Aug 18 '14 at 18:36

score 0 · Answer 1 · answered Aug 18 '14 at 18:56

0

font-size: 0px?

You can only mess up with something like this I suppose.

answered Aug 18 '14 at 18:56

Nathan Peixoto

312
1
8

Apply class to text without inline span

1 Answers1