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/
