Makes sense when I see it in action ... thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; lang="en">
<head>
<title>
CSS Cascade
</title>
<style>
body { color: blue; }
.c2 {background-color: green;}
.c1 {background-color: yellow;}
</style>
</head>
<body>
<div id="i1" class="c1 c2">C1 then C2</div>
<div id="i2" class="c2 c1">C2 then C1</div>
</body>
</html>
Greg
-----Original Message-----
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Chris Rockwell
Sent: Tuesday, October 01, 2013 2:16 PM
To: Robert A. Rosenberg
Cc: CSS-D; Philip Taylor
Subject: Re: [css-d] Two classes, two conflicting rules, which wins ?
>
>
> So you are saying that in a 'class="c2 c1"' case, it scans the CSS
> defs, sees .c1 and applies it, keeps going and sees .c2 which
> overrides the c1 width?
>
That's how I would explain it, but I'm not certain how the browsers actually
compile it. I would **guess** that it is compiled and only the correct styles
are applied, so there isn't actual overriding, or re-painting; but that's just
a guess.
> IOW: The order that you list the class in the HTML is ignored and only
> the order that the classes are defined in the CSS defs counts.
>
Yes, as long as specificity isn't a factor (and keep in mind the order in which
you include your stylesheets). The StackOverflow link that was included in
this thread showed cases where the order in the attribute would make a
difference (using advanced selectors), but at a quick glance that seemed like
an *extreme* edge case that I couldn't imagine ever using in practice.
All that being said, for this situation, I think I would probably try to find a
way to avoid doing what this discussion is centered around. I've been really
trying to study up on oocss (
https://github.com/stubbornella/oocss/wiki) and smaccs (http://smacss.com/) and
I plan on implementing these concepts in the refactor I'm getting ready to
start.
So, off the top of my head, something like this:
/* layout stuff */
.boxNarrow {
width: 5em;
}
.boxWide {
width: 10em;
}
/* prettify */
.boxSkin {
border-radius: 10px;
box-shadow: 1px 1px 5px #000000;
}
<div class="boxSkin boxNarrow">...</div> <div class="boxSkin boxWide">...</div>
--
Chris Rockwell
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
