How to select text that is not marked up with CSS/jquery?

Question

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.

Answer 1

I don't think there is a way to do this, at least not using CSS. The safest way to do this IMO is o apply all desired styles to the li element:

li { font-size: 18px; ... }

and negate everything you don't want in the a element:

li a { font-size: 16px; ... }

(You probably want to use more specific selectors than just li and a, maybe prefix them with a parent's class name)

With JQuery, you could certainly wrap a new tag around the "not marked up" area but that's complex and won't work with JS turned off. I wouldn't do that.

Answer 2

//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

Answer 3

Can you apply a style to the li element and then override that affect with a style applied to the a element within the li element.

Perhaps create the following styles;

li.myListElements { color: #FFF; }
li.myListElements a { color: #F00; font-weight: bold; }

And adjust the markup;

<li class="myListElements"><a href="www.google.com">This is marked up</a> and this is not</li>