Tags

we can assign multiple class names to a single element? That means we can change the style sheet so it looks like this:

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

.oddBoxOut {
  float: left;
}

.evenBoxOut {
  float: right;
}

And then the HTML will look like:

<div class="boxOut oddBoxOut">

Grouping Selectors

A single style may have multiple selectors assigned to it through the use of grouping.

To revisit the previous example, we first simplify the HTML so we only mention the one class:

<div class="oddBoxOut">

Then we assign the CSS we want to it, but we group the common property/value pairs.

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

.oddBoxOut {
  float: left;
}

.evenBoxOut {
  float: right;
}

These two techniques should solve most problems which people think can be solved with OO-style inheritance

Advertisements