Not sure, I do not use it in my code, but without it I got 2 lines of yellow in Chrome, Firefox and Explorer. Not sure why I get 2 line of yellow. 303-499-5799 (Office) 970-586-3768 (Estes Park) 67 Benthaven Place, Boulder, CO 80305 http://www.Mountain-Mall.Com/ Office Hours: Mon-Thu Other: 9 am to 5 pm By Appointment
Feeding the Internet Since 1995! From: Tom Livingston Sent: Tuesday, October 01, 2013 5:13 PM To: Karl Snyder Cc: CSS-D Subject: Re: [css-d] Two classes, two conflicting rules, which wins ? 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" <k...@mountain-mall.com> 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: 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/ > ______________________________________________________________________ > 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/ ______________________________________________________________________ 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/