01 June 2005

Software: CSS Multiple Class Selectors

I just found out that HTML elements can have multiple (CSS) class names, such as <p class="Number ReadOnly">. This feature allows a design approach where the CSS class selector names are defined first. If the style definitions are independent of each other, then your elements can combine a number of styles. If you have a style sheet with these definitions ...
.ReadOnly { background-color : aliceblue; }
.Number { text-align : right; }
... and your elements have multiple class names ...
<input class="ReadOnly" readonly="true" value="ABCD"/>
<input class="Number" value="123456"/>
<input class="Number ReadOnly" readonly="true" value="34566"/>
... then ...
  • 123456 and 34566 should be right justified.
  • ABCD should be left-justified.
  • 34566 and ABCD shold have coloured backgrounds.