We help IT Professionals succeed at work.

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

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

<p class="author-info">

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

</p>

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?  

Thanks,
- 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.
Comment
Watch Question

Information Systems Manager
Top Expert 2012
Commented:
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).

Author

Commented:
That did the trick - thank you!

- yg