HTML and CSS Reference
In-Depth Information
This is a case where the cascade plays a vital role. Both the
figure
and
portrait
classes try to set the width of
the
<div>
, and they have equal specificity (10). The
portrait
class takes precedence because it comes after the
figure
class in figcaption_adapt.css like this:
.figure {
width: 61.5%
}
.figure img {
max-width: 100%;
}
.portrait {
width: 40.9%;
}
As Figure
7-19
shows, the narrower width is applied correctly to the
<div>
, which scales automatically when
the browser viewport is resized.
Figure 7-19.
The portrait class applies the correct width to the figure <div>
If you reverse the order of the
portrait
and
figure
class definitions in the style sheet, the
figure
class takes
precedence.
