Is the comma valid there? I've never seen that before. Sent from my iPhone
> On Oct 1, 2013, at 7:07 PM, "Karl Snyder" <[email protected]> wrote: > > Seems to make a difference in Chrome if you add a comma between the classes > (see div id line below), otherwise both lines are yellow: > > <!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> > > From: Greg Gamble > Sent: Tuesday, October 01, 2013 4:43 PM > To: CSS-D > Subject: Re: [css-d] Two classes, two conflicting rules, which wins ? > > 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: [email protected] > [mailto:[email protected]] 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 [[email protected]] > 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 [[email protected]] > 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 [[email protected]] > 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 [[email protected]] 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/
