CSS selector for numbered class/id - html

Question

I have the following situation:
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1">stuffs</div>
<div id="menu2">stuffs</div>
...... and so on
</div>
My requirement is to access all div having id $=menu inside myMenu except menu0, as my menu can have like 10 to 15 item so one way is to do:
#myMenu > menu1 {style}
#myMenu > menu2 {style}
so on... 15 times
but as I have to give same style to all of them , it seems unnecessary , I am looking for CSS selector which will fit correctly for my requirement also having compatible to IE8.
Any help is greatly appreciated.

Answer 1

If you always have the #menu0 element, you can use the general sibling selector that is IE8 compliant:
#menu0 ~ [id^="menu"] {
color: red;
}
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1">stuffs</div>
<div id="menu2">stuffs</div>
</div>
or use classes (along with ids) that would fit better.

Answer 2

This css3 rule will get the list without #menu0:
div#myMenu > div:not(#menu0)
{
}
Alternately, you can use these two:
div#myMenu > div
{
/*new values*/
}
div#myMenu > div#menu0
{
/*reset with the original values*/
}
This code will hit all the children divs, then the second rule will override the prior one because it is later in the cascade and reset #menu0 to its original condition.

Answer 3

You can use class but also you can:
#myMenu div[id^="menu"]:not(#menu0) {
color: red;
}
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1">stuffs</div>
<div id="menu2">stuffs</div>
<div id="menu3">stuffs</div>
<div id="menu4">stuffs</div>
<div id="menu5">stuffs</div>
</div>
This one selects all id which start with word 'menu' and is child of element with id #myMenu but exclude element with id #menu0
After comment for older browsers e.g. ie8 you can use:
#myMenu div[id^="menu"] {
color: red;
}
#myMenu #menu0 {
color: #000;
}
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1">stuffs</div>
<div id="menu2">stuffs</div>
<div id="menu3">stuffs</div>
<div id="menu4">stuffs</div>
<div id="menu5">stuffs</div>
</div>
Because id is unique.

Answer 4

add another class:
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1" class="sub">stuffs</div>
<div id="menu2" class="sub">stuffs</div>
...... and so on
</div>
and select:
#myMenu > .sub{ ... }
or simplicity
#myMenu .sub{ ... }

Answer 5

If, as implied from the comments to the question, it's always the first child that should not be selected:
/* selects all the <div>s with an id beginning with 'menu',
that follow a <div> with an id beginning with menu, that
are the direct-children of the element with an id of 'myMenu': */
#myMenu > div[id^=menu] + div[id^=menu] {
/* css here */
}
Or:
/* selects all <div> elements that are not the :first-child
that are direct children of <div id="myMenu">: */
#myMenu > div:not(:first-child)
/* css here */
}
Or:
/* selects all <div>s with an id beginning with menu that
have a previous sibling <div> with an id beginning with
'menu' that is the direct child of <div id="myMenu">: */
#myMenu > div[id^=menu] ~ div[id^=menu]
/* css here */
}