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

egoselfaxis
egoselfaxis used Ask the Experts™
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

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial