 CSS selector order
Saturday, 7 April 2007
Given the stylesheet declaration outlined below:
.uno {
width: 66%;
border: 1px solid fuchsia;
}
#due {
width: 33%;
border: 1px solid fuchsia;
}
What will be the width of this HTML section?
<div class="uno" id="due" style="width: 99%">
when the moon hits your eye like a big-a pizza pie
that's amore
when the world seems to shine like you've had too much wine
that's amore
</div>
If you said 99%, you’d be right. What if the “style” tag was removed? How wide will it be then?
<div class="uno" id="due">
when the stars make you drool joost-a like pasta fazool
that's amore
when you dance down the street with a cloud at your feet
you're in love
</div>
If you said 66% you’d be wrong. Why is the correct answer 33%? Because in CSS, the “id” selectors override the “class” selectors and any inline “style” overrides both.
|
