CSS Attribute selector - Match attribute values that begin with

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

To ensure maximum compatibility, I would give each ul a class menu and use

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

note that the > selector is not supported by IE < 8.

Answer 2

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

Answer 3

Here is some detailed info about CSS selectors

.