selector based on element value

selector style text

[lighthouse]

is there a way to create a selector based on the _value_ of an element? IOW, what i want to do create a selector so that I can style a particular <li> or <a> element based on the text value that element contains.

basically, i have a menu that is implemented as an <ul> w/ each <li> being styled as a menu button. the stylesheet provides normal, hover, and selected backgrounds for each menu item. the problem is that the client wants one particular menu item to use a different background scheme.

the site is joomla based and i don't see anyway to add a special class or id to just one item in a menu. what i thought should work is to use a little code magic to say, "if the contents of <li> in some menu class = 'this text', then style it this way..."

tia

[geoffb]

could you not give the one specific <li> it's own class, different from the rest:

<ul class="blar">
<li>Home</li>
<li>About Us</li>
<li class="different">Contact Us</li>
</ul>

CSS

.different {
colour:grey;
}

geoffb

[lighthouse]

not really. the menu is generated by the php CMS (joomla). it automatically applies an id to the <ul> and also a class to the active menu item, but it does not provide a facility (that I can find) that enables me to add a class to one particular menu item.

I did sort of find a way to do what i want, but just not the way i wanted. i know that the menu item is ALWAYS the last one in the <ul> so i used a selector like:

ul#mainlevel li:last-child a

it works in my case, but i still think you should be able to do something like:

ul#mainlevel li a[contains-text:"Help"]

i'm a dreamer. at least i've learned a lot about selectors.

[SuzyUK]

Hi lighthouse and Welcome to WebmasterWorld!

No I don't think it's possible to have a selector based on the content of the element but I could be wrong on that..

however it is possible using CSS3 selectors, as you found out.

the

:last-child

selector is an pseudo-class selector [w3.org], and as long as you know it will always be the last child of the list is as good as any to use, support for it is better than most other advanced selectors, however IE7 still doesn't support it, though it does

:first-child

:(

:nth-child

would be another solution if it were not the last link, but support for that is even more sketchy (I believe FF3.1 might have it but haven't checked)

there are also Attribute Selectors [w3.org] which have better support than both of the above - and I believe you could use them lind of like you're looking for, instead of using the text value though you could use the href attribute, as I presume it's unique in the list?

e.g.

ul li a[href*="google"] {background: #dad;}

the asterisk before the = means the link contains the text "google" somewhere in it, you just choose the portion of the link URI that's unique in your menu (you can include the .[extension] too

the above links explains more about how the attribute selectors can be used, if your CMS produces the title attribute you could use it in the same way..

again though support may be a hindrance although this one is supported by IE7

if support for IE6 and below is important then you might just have to resort to some javascript if you can't find a joomla add-on which adds individual classes to links, (sorry don't know joomla but Drupal does this out of the box in most basic themes)

[lighthouse]

SuzyUK, thanks! i never thought of the attribute selectors, but that is a great suggestion.

lighthouse