css selectors - Simplifying CSS -

i have css properties applied lot of ids.i need simplify code there 20 ids! here css:

 #a1_build ul,#a2_build ul,#a1_build li,#a2_build li,  #a1_apply ul,#a2_apply ul,#a1_apply li,#a2_apply li,  #a1_learn ul,#a2_learn ul,#a1_learn li,#a2_learn li  {     margin:0;     padding:0;     list-style:none;     } #a1_build ,#a2_build, #a1_apply ,#a2_apply, #a1_learn ,#a2_learn        {          margin-top:1em;        }  #a1_build li,#a2_build li,#a1_apply li,#a2_apply li, #a1_learn li,#a2_learn li  {      width:696px;     height:500px;     overflow:hidden;      } 

now, ids going a1_build, a2_build....a10_build, a1_apply, a2_apply......a10_apply , a1_learn, a2_learn.....a10_learn. want able generalize 'a'+n+'_build', 'a'+n+'_apply' , 'a'+n+'_learn' , make n go 1-10 make whole lot easier! how can this?

yes can it, using match end of string selector [a$=b] end of particular attribute. works in ie7 , above.

jsfiddle

[id$=build] ul, [id$=apply] ul, [id$=learn] ul {     margin:0;     padding:0;     list-style:none; } [id$=build], [id$=apply], [id$=learn] {     margin-top:1em; }  [id$=build] li, [id$=apply] li, [id$=learn] li {      width:696px;     height:500px;     overflow:hidden;  } 

alternative method

i recommend against though , using more class-based approach, this:

jsfiddle

html

<div id="a1" class="a_section">     <ul class="build">         <li>item</li>     </ul> </div> 

css

.a_section .build {     margin:0;     padding:0;     list-style:none; }