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" <[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/
______________________________________________________________________
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/
