On Thu, 5 Apr 2007, Jono wrote: > <div class="parent"> > <table id="LC764_Menu1" class="menu635"> > <tbody> > <tr> > <td id="LC764_menuItem000" class="menuItem635">Login</td> > </tr> > <tr> > <td id="LC764_menuItem001" class="menuItem635">About Us</td> > </tr> > <tr> > <td id="LC764_menuItem002" class="menuItem635">Contact Us</td> > </tr> > </tbody> > </table> > </div>
It _seems_ to have superfluous markup, though of course you may have reasons for the <div> that encloses the <tavle> or for having _both_ id _and_ class for the table and each cell - and for the use of a table (as opposite to a simpler structure, <ul>). Superfluous markup as such makes styling easier in a sense, though you need to be careful with the id and class names that use numbers, instead of being mnemonic. Yet I wonder whether you would find the situation easier to manage with less complicated markup. > I need to ONLY target the "Contact Us" menu item which (above) is > td#LC764_menuItem002. I need to make it white with a red background, but > the rest of the menu items need to be black with a yellow background. > > Simple, as follows: It's simple, and (with the given markup) you could simplify > .parent td#LC764_menuItem002 { to just #LC764_menuItem002 { > The trick is to target a range of IDs; figuratively as follows: > > /* account for all possible (within reason) Contact Us id ranges */ > .parent td#LC764_menuItem002 - .parent td#LC1099_menuItem002 { If the markup is fixed, i.e. you cannot change it, then there is no way to do such things at present, except by writing a (long) list of selectors. Someone might suggest using JavaScript that traverses the document tree and performs pattern matching on id attribute values, but that would not be reliable at all. > The only sure fire way to do this is to write out a very long list of > possible IDs: > .parent td#LC764_menuItem002, > .parent td#LC765_menuItem002, > .parent td#LC766_menuItem002, > .parent td#LC767_menuItem002, > .parent td#LC768_menuItem002, > .parent td#LC769_menuItem002 { There, too, you can use just the #identifier parts. Any selector with such a part has higher specificity than any selector that hasn't, so you need not worry about specificity here. But if the markup is under your control, or under the control of someone who can understand the issue, it should be dead simple: just include a class attribute into each of the "Contact Us" cells. If the existing class and id attributes are needed for some purpose, you can add a class name (instead of replacing the current class name): <td id="LC764_menuItem002" class="menuItem635 contact">Contact Us</td> And you would use td.contact { ... } (Actually you could even use just .contact instead of td.contact, but the latter is visually clearer to a person who reads the CSS code.) -- Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/ ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/