27

I'd like to know how to write a css block that applies to either multiple ids or multiple classes:

Something like:

.class1, .class2 {
 ...
}

or

#id1, #id2 {
 ...
}

I'd like to know how to do both cases (which hopefully are cross browser compliant). Thanks.

Update: To make it more interesting, is this valid too?

#id tr, #id2 tr {

}

?

Buhake Sindi
  • 85,564
  • 27
  • 164
  • 223
aeq
  • 10,179
  • 15
  • 42
  • 46

2 Answers2

30

You are looking for something like this :

.oddBoxOut, 
.evenBoxOut {
  width: 12em;
  padding: 0.5em;
  margin: 0.5em;
  border: solid 1px black;
}

.oddBoxOut {
  float: left;
}

.evenBoxOut {
  float: right;
}

Update :

p#exampleID1 { background-color: blue; } 
p#exampleID2 { text-transform: uppercase; }
Pranay Rana
  • 170,430
  • 35
  • 234
  • 261
  • For my update, I actually want to select them both in the same block: something like #id1 tr, #id2 tr {} Is that right? Or should it be: tr#id1, tr#id2{} ? – aeq Aug 11 '10 at 12:38
  • as per the notation tr#id1, tr#id2{} is right not tried #id1 tr, #id2 tr {} this one – Pranay Rana Aug 11 '10 at 12:40
1

For your update it is also valid,

#id1 tr {

}

means that every child of node id #id1 will be CSS'ed.

you can do this too

tr#id1 {

}

Only tr will be affected if id == #id1

Buhake Sindi
  • 85,564
  • 27
  • 164
  • 223