CSS selector for numbered class / id

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 access to all divs with an identifier $=menuinside myMenuexcept menu0, since my menu can have from 10 to 15 elements, so one way:

 #myMenu > menu1 {style}
 #myMenu > menu2 {style}
 so on... 15 times

but since I have to give the same style to all of them, this seems unnecessary, I am looking for a CSS selector that fits correctly for my requirement, which also has IE8 compatibility.

Any help is appreciated.

Answer 1

If you always have an element #menu0, you can use the general sibling selector compatible with IE8:

    #menu0 ~ [id^="menu"] {
        color: red;
    }

<div id="myMenu">
   <div id="menu0">stuffs</div>
   <div id="menu1">stuffs</div>
   <div id="menu2">stuffs</div>
</div>

Run codeHide result

classes ( id s), .

Answer 2

css3 # menu0:

div#myMenu > div:not(#menu0)
{
}

:

div#myMenu > div
{ 
    /*new values*/ 
}

div#myMenu > div#menu0
{ 
    /*reset with the original values*/ 
}

div, , reset # menu0 .

Answer 3

, :

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

Hide result

id, 'menu' id #myMenu, id #menu0

, . ie8 :

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

Hide result

id .

Answer 4

:

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

:

#myMenu > .sub{ ... }

#myMenu  .sub{ ... }

Answer 5

, , :

/* 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 */
}

:

/* 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 */
}

:

/* 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 */
}