We help IT Professionals succeed at work.

Need help hiding text that's within nested SPAN elements using CSS

egoselfaxis asked
How would I go about hiding only the word "by" in the following block of HTML using CSS ?

<p class="author-info">

		by <span class="blue">Joe Schmoe</span> 


Open in new window

I've tried the following, .. but I can't seem to get it to work:

p.author-info span { display:none; }
p.author-info span span.blue { display:block!important; }

Open in new window

What's the trick?  Is this even possible?  

- Yvan

p.s. Note that this is dynamically generated code within a commercial WordPress theme, .. so modifying the HTML code directly isn't really an option .. at least not without creating problems.  That's why I'm trying to use a simpler CSS based approach.
Watch Question

Information Systems Manager
Top Expert 2012
you can do it with visibility:
p.author-info span { visibility:hidden; }
p.author-info span span.blue { visibility:visible; }

Open in new window

otherwise it's a case of manipulating the DOM with JavaScript (changing the HTML in the client side).


That did the trick - thank you!

- yg