Question

I am trying to identify all the <UL> that contain a menu list by defining the ID like this:

<ul id="menutop">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
</ul>
<ul id="menumain">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
</ul>

As per what I understand, I could use:

ul[id|='menu']>li>a {color:#f00;}

(<a> direct child of a <li> direct child of an <ul> that has its id starting with menu)
But it doesn’t work.

Searching a bit brought me this [question][1] which suggests that ID is an attribute and not a property so I don’t get why it isn’t working. What am I doing wrong?

Here’s a link to the CSS2 Matching attributes and attribute values as per the W3 standards ( http://www.w3.org/TR/CSS2/selector.html#matching-attrs ).

Answer 1

According to the W3 documentation:

[att|=val]
Represents an element with the att attribute, its value either being exactly “val” or beginning with “val” immediately followed by “-” (U+002D)

http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

This means ul[id|='menu'] is looking for <ul id="menu-somevalue"/> or <ul id="menu" />

That’s likely why it isn’t working, because menutop and menumain don’t match.

You could try renaming the IDs to menu-top and menu-main, or you could do:

<ul id="menutop" class="menu">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
</ul>
<ul id="menumain" class="menu">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
</ul>

and your css:

ul.menu li a {color: #f00;}

This would give you coloring as needed on all menu ul’s, while still giving you the ability to have unique IDs for use with any scripting, etc. as needed.

Also, as Pekka mentioned, the > selector isn’t widely supported so you may want to reconsider use of it for now…