I want to apply some CSS to text that I can't get marked up in spans. So for example:
<li><a href="google.com">This is marked up</a> and this is not </li>
I want to select, with either CSS (preferably) or jQuery this bit: and this is not
. Maybe there's a method of selecting the entire li then excluding a, that seems like a bypass.
The reason why I can't get it marked up is because I'm using WP and prefer to do that rather than dig into endless lines of PHP code. Thanks a lot for the help.
EDIT: What I want to do is apply a "display: none" to that bit of text I want to select. I can't do: li {display: none; }
because that'll take the whole thing off, even when I do
li a {display: inline; }
that's why I was looking for a method to choose only that text specifically.
And I have plenty of those on the page.
//assuming that you have only one li element
var a_text = $('li > a').text();
var li_text = $('li').text().replace(a_text,'');
$('li').html($('li').html().replace(li_text,'<span style="background:#000;color:#fff">'+li_text+'</span>'));
for more then one element:
//assuming more then one
$('li').each(function(){
var a_text = $(this).children('a').text();
var li_text = $(this).text().replace(a_text,'');
$(this).html($(this).html().replace(li_text,'<span style="background:#000;color:#fff">'+li_text+'</span>'));
});
cheers, /marcin