Re: [css-d] Two classes, two conflicting rules, which wins ?
On 1 Oct 2013, at 16:50, Robert A. Rosenberg wrote: 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? 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. On Wed, Oct 2, 2013 at 9:17 AM, Eric A. Meyer e...@meyerweb.com wrote: That's correct. (Assuming the selectors have the same origin, weight, AND specificity, that is; in that case, then the order the rules are listed in the CSS matters. If two selectors don't have the same origin, weight, OR specificity, then the order they're listed in the CSS is irrelevant.) Pertaining to origin, it's worth pointing out that the cascade also applies when attaching external assets to a document: HTML: !-- Identical selectors in both css files, the selector in other.css will win [!] -- link rel=stylesheet href=one.css link rel=stylesheet href=other.css !-- Flip the order and now the selector in one.css wins -- link rel=stylesheet href=other.css link rel=stylesheet href=one.css CSS: // Same with CSS imports @import url(other.css); @import url(one.css); -- winning [!] unless the nuclear option !important is used in one but not the other -- Jon Reece jon.re...@gmail.com __ 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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
On 1 Oct 2013, at 16:50, Robert A. Rosenberg wrote: 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? 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. That's correct. (Assuming the selectors have the same origin, weight, AND specificity, that is; in that case, then the order the rules are listed in the CSS matters. If two selectors don't have the same origin, weight, OR specificity, then the order they're listed in the CSS is irrelevant.) -- Eric A. Meyer - http://meyerweb.com/ __ 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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
OK, I'll bite :-) What is origin, weight, and specificity? I hear the terms and I think I get it ... but, to hear it from the Master would be great. Greg -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Eric A. Meyer Sent: Wednesday, October 02, 2013 6:18 AM To: CSS-D Subject: Re: [css-d] Two classes, two conflicting rules, which wins ? On 1 Oct 2013, at 16:50, Robert A. Rosenberg wrote: 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? 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. That's correct. (Assuming the selectors have the same origin, weight, AND specificity, that is; in that case, then the order the rules are listed in the CSS matters. If two selectors don't have the same origin, weight, OR specificity, then the order they're listed in the CSS is irrelevant.) -- Eric A. Meyer - http://meyerweb.com/ __ 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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
On 2 Oct 2013, at 10:43, Greg Gamble wrote:
OK, I'll bite :-)
What is origin, weight, and specificity? I hear the terms and I
think I get it ... but, to hear it from the Master would be great.
Well, the Master isn't available (something about a drum circle and
looking for a police box key), but I'll take a swing at it. The details
are here:
http://www.w3.org/TR/CSS2/cascade.html#cascade
Here's what I meant:
* Origin -- whether the rule comes from the author, the user, or the
user agent. There's a precedence order defined in the specification, so
that (for example) author rules always override user agent rules.
That's why you saying 'strong {font-weight: normal;}' removes the
boldface treatment even if there's a user agent rule that says something
like 'h1 strong {font-weight: bolder;}'.
* Weight -- called importance in CSS 2.1. If a rule has been given
'!important' then it wins over any non-important rule, period, end of
story. Two conflicting rules that have the same weight (or importance),
and thus have their conflict resolved through other means.
* Specificity -- how specific a selector is, which is figured out by
counting the pieces and coming up with a value. Higher specificity
trumps lower specificity, assuming the origin and weight are the same:
thus two normal-weight author rules that conflict are resolved using
selector specificity.
…and if, after all that, two rules are still in conflict, THEN the
order they're written in matters.
There's a little bit more to the story, once you take into account
inheritance and the lack of a notion of element proximity in the
document tree and so forth, but those are the core bits.
--
Eric A. Meyer - http://meyerweb.com/
__
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-d] Two classes, two conflicting rules, which wins ?
Consider :
.c1 {width: 20em}
.c2 {width: 30em}
DIV id=i1 class=c1 c2.../DIV
DIV id=i2 class=c2 c1.../DIV
What widths do i1 and i2 have, and why ? Answers by reference
to the relevant W3C specification(s), please, not by experiment
or guesswork !
Philip Taylor
__
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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
How you assign them in the class attribute has no bearing.
On Tue, Oct 1, 2013 at 2:45 PM, Chris Rockwell ch...@chrisrockwell.comwrote:
http://www.w3.org/TR/CSS2/cascade.html#cascading-order
In your example, width is 30em;
On Tue, Oct 1, 2013 at 2:40 PM, Philip Taylor p.tay...@rhul.ac.uk wrote:
Consider :
.c1 {width: 20em}
.c2 {width: 30em}
DIV id=i1 class=c1 c2.../DIV
DIV id=i2 class=c2 c1.../DIV
What widths do i1 and i2 have, and why ? Answers by reference
to the relevant W3C specification(s), please, not by experiment
or guesswork !
Philip Taylor
__
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/
--
Chris Rockwell
--
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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
http://www.w3.org/TR/CSS2/cascade.html#cascading-order
In your example, width is 30em;
On Tue, Oct 1, 2013 at 2:40 PM, Philip Taylor p.tay...@rhul.ac.uk wrote:
Consider :
.c1 {width: 20em}
.c2 {width: 30em}
DIV id=i1 class=c1 c2.../DIV
DIV id=i2 class=c2 c1.../DIV
What widths do i1 and i2 have, and why ? Answers by reference
to the relevant W3C specification(s), please, not by experiment
or guesswork !
Philip Taylor
__
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/
--
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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
Chris Rockwell wrote: http://www.w3.org/TR/CSS2/cascade.html#cascading-order In your example, width is 30em; How you assign them in the class attribute has no bearing. OK, so in particular you are referencing this part, I assume : Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself. Is that correct, Chris ? Philip Taylor __ 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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
I tend to agree. Since .c2 is defined after .c1 it takes precendence
over the first declaration. AFAIK the order in which the classes are
defined within the attribute do not influence.
Far more than anyone could ever ask for is here:
http://stackoverflow.com/questions/15670631/does-the-order-of-classes-listed-on-an-item-affect-the-css
Jørgen Lang
Am 01.10.13 20:45, schrieb Chris Rockwell:
http://www.w3.org/TR/CSS2/cascade.html#cascading-order
In your example, width is 30em;
On Tue, Oct 1, 2013 at 2:40 PM, Philip Taylor p.tay...@rhul.ac.uk wrote:
Consider :
.c1 {width: 20em}
.c2 {width: 30em}
DIV id=i1 class=c1 c2.../DIV
DIV id=i2 class=c2 c1.../DIV
What widths do i1 and i2 have, and why ? Answers by reference
to the relevant W3C specification(s), please, not by experiment
or guesswork !
__
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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
That is why it works that way, yes.
The engine sees two widths, both with the same weight, origin and
specificity; the last one to be declared will win.
If instead, you did:
div.c1 {width:20em}
.c2 {width:30em}
The width would be 20em, because div.c1 is more specific.
On Tue, Oct 1, 2013 at 2:51 PM, Philip Taylor p.tay...@rhul.ac.uk wrote:
Chris Rockwell wrote:
http://www.w3.org/TR/CSS2/cascade.html#cascading-order
In your example, width is 30em;
How you assign them in the class attribute has no bearing.
OK, so in particular you are referencing this part, I assume :
Finally, sort by order specified: if two declarations have the same
weight, origin and specificity, the latter specified wins. Declarations in
imported style sheets are considered to be before any declarations in the
style sheet itself.
Is that correct, Chris ?
Philip Taylor
--
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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
Wouldn't the first div width = 30em, and the second div width = 20em?
DIV id=i1 class=c1 c2.../DIV C2 overrides C1
DIV id=i2 class=c2 c1.../DIV C1 overrides C2
Greg Gamble
SBCTC - Olympia | Information Services
-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 11:46 AM
To: Philip Taylor
Cc: CSS-D
Subject: Re: [css-d] Two classes, two conflicting rules, which wins ?
How you assign them in the class attribute has no bearing.
On Tue, Oct 1, 2013 at 2:45 PM, Chris Rockwell ch...@chrisrockwell.comwrote:
http://www.w3.org/TR/CSS2/cascade.html#cascading-order
In your example, width is 30em;
On Tue, Oct 1, 2013 at 2:40 PM, Philip Taylor p.tay...@rhul.ac.uk wrote:
Consider :
.c1 {width: 20em}
.c2 {width: 30em}
DIV id=i1 class=c1 c2.../DIV
DIV id=i2 class=c2 c1.../DIV
What widths do i1 and i2 have, and why ? Answers by reference to the
relevant W3C specification(s), please, not by experiment or guesswork
!
Philip Taylor
_
_ 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/
--
Chris Rockwell
--
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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
Greg - I can see how you might think that, but you are thinking along the
lines of directly mapping the class to the declaration (e.g. div class=c1
c2 === div style=width:20em;width30em) which is not the case. The
engine decides which style to map based on the cascading order, and only
those styles are applied. I hope that helps and I haven't confused things
more.
On Tue, Oct 1, 2013 at 2:54 PM, Greg Gamble ggam...@sbctc.edu wrote:
Wouldn't the first div width = 30em, and the second div width = 20em?
DIV id=i1 class=c1 c2.../DIV C2 overrides C1
DIV id=i2 class=c2 c1.../DIV C1 overrides C2
Greg Gamble
SBCTC - Olympia | Information Services
-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 11:46 AM
To: Philip Taylor
Cc: CSS-D
Subject: Re: [css-d] Two classes, two conflicting rules, which wins ?
How you assign them in the class attribute has no bearing.
On Tue, Oct 1, 2013 at 2:45 PM, Chris Rockwell ch...@chrisrockwell.com
wrote:
http://www.w3.org/TR/CSS2/cascade.html#cascading-order
In your example, width is 30em;
On Tue, Oct 1, 2013 at 2:40 PM, Philip Taylor p.tay...@rhul.ac.uk
wrote:
Consider :
.c1 {width: 20em}
.c2 {width: 30em}
DIV id=i1 class=c1 c2.../DIV
DIV id=i2 class=c2 c1.../DIV
What widths do i1 and i2 have, and why ? Answers by reference to the
relevant W3C specification(s), please, not by experiment or guesswork
!
Philip Taylor
_
_ 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/
--
Chris Rockwell
--
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/
--
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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
This is a great clarification and something that would've stumped me
completely if ever encountered.
Thanks,
Mike
-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 12:01 PM
To: Greg Gamble
Cc: CSS-D
Subject: Re: [css-d] Two classes, two conflicting rules, which wins ?
Greg - I can see how you might think that, but you are thinking along the
lines of directly mapping the class to the declaration (e.g. div class=c1
c2 === div style=width:20em;width30em) which is not the case. The
engine decides which style to map based on the cascading order, and only
those styles are applied. I hope that helps and I haven't confused things
more.
On Tue, Oct 1, 2013 at 2:54 PM, Greg Gamble ggam...@sbctc.edu wrote:
Wouldn't the first div width = 30em, and the second div width = 20em?
DIV id=i1 class=c1 c2.../DIV C2 overrides C1
DIV id=i2 class=c2 c1.../DIV C1 overrides C2
Greg Gamble
SBCTC - Olympia | Information Services
-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 11:46 AM
To: Philip Taylor
Cc: CSS-D
Subject: Re: [css-d] Two classes, two conflicting rules, which wins ?
How you assign them in the class attribute has no bearing.
On Tue, Oct 1, 2013 at 2:45 PM, Chris Rockwell
ch...@chrisrockwell.com
wrote:
http://www.w3.org/TR/CSS2/cascade.html#cascading-order
In your example, width is 30em;
On Tue, Oct 1, 2013 at 2:40 PM, Philip Taylor p.tay...@rhul.ac.uk
wrote:
Consider :
.c1 {width: 20em}
.c2 {width: 30em}
DIV id=i1 class=c1 c2.../DIV
DIV id=i2 class=c2 c1.../DIV
What widths do i1 and i2 have, and why ? Answers by reference to
the relevant W3C specification(s), please, not by experiment or
guesswork !
Philip Taylor
___
__ _ 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/
--
Chris Rockwell
--
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/
--
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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
Chris Rockwell wrote:
That is why it works that way, yes.
The engine sees two widths, both with the same weight, origin and
specificity; the last one to be declared will win.
If instead, you did:
div.c1 {width:20em}
.c2 {width:30em}
The width would be 20em, because div.c1 is more specific.
Yes, the last example is clear; it was only the 'class=c1 c2'
about which I was uncertain.
Philip Taylor
__
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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
What about:
c2.c1{width: 20px}
?
On Tue, Oct 1, 2013 at 2:55 PM, Chris Rockwell ch...@chrisrockwell.com wrote:
That is why it works that way, yes.
The engine sees two widths, both with the same weight, origin and
specificity; the last one to be declared will win.
If instead, you did:
div.c1 {width:20em}
.c2 {width:30em}
The width would be 20em, because div.c1 is more specific.
On Tue, Oct 1, 2013 at 2:51 PM, Philip Taylor p.tay...@rhul.ac.uk wrote:
Chris Rockwell wrote:
http://www.w3.org/TR/CSS2/cascade.html#cascading-order
In your example, width is 30em;
How you assign them in the class attribute has no bearing.
OK, so in particular you are referencing this part, I assume :
Finally, sort by order specified: if two declarations have the same
weight, origin and specificity, the latter specified wins. Declarations in
imported style sheets are considered to be before any declarations in the
style sheet itself.
Is that correct, Chris ?
Philip Taylor
--
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/
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
Sorry...
correction:
.c2.c1{width: 20px}
?
On Tue, Oct 1, 2013 at 4:15 PM, Tom Livingston tom...@gmail.com wrote:
What about:
c2.c1{width: 20px}
?
On Tue, Oct 1, 2013 at 2:55 PM, Chris Rockwell ch...@chrisrockwell.com
wrote:
That is why it works that way, yes.
The engine sees two widths, both with the same weight, origin and
specificity; the last one to be declared will win.
If instead, you did:
div.c1 {width:20em}
.c2 {width:30em}
The width would be 20em, because div.c1 is more specific.
On Tue, Oct 1, 2013 at 2:51 PM, Philip Taylor p.tay...@rhul.ac.uk wrote:
Chris Rockwell wrote:
http://www.w3.org/TR/CSS2/cascade.html#cascading-order
In your example, width is 30em;
How you assign them in the class attribute has no bearing.
OK, so in particular you are referencing this part, I assume :
Finally, sort by order specified: if two declarations have the same
weight, origin and specificity, the latter specified wins. Declarations in
imported style sheets are considered to be before any declarations in the
style sheet itself.
Is that correct, Chris ?
Philip Taylor
--
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/
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
That trumps .c2 or .c1 because it's more specific, but the cascade order
would still apply:
.c2.c1 {width:20px}
.c1.c2 {width:30px}
On Tue, Oct 1, 2013 at 4:15 PM, Tom Livingston tom...@gmail.com wrote:
Sorry...
correction:
.c2.c1{width: 20px}
?
On Tue, Oct 1, 2013 at 4:15 PM, Tom Livingston tom...@gmail.com wrote:
What about:
c2.c1{width: 20px}
?
On Tue, Oct 1, 2013 at 2:55 PM, Chris Rockwell ch...@chrisrockwell.com
wrote:
That is why it works that way, yes.
The engine sees two widths, both with the same weight, origin and
specificity; the last one to be declared will win.
If instead, you did:
div.c1 {width:20em}
.c2 {width:30em}
The width would be 20em, because div.c1 is more specific.
On Tue, Oct 1, 2013 at 2:51 PM, Philip Taylor p.tay...@rhul.ac.uk
wrote:
Chris Rockwell wrote:
http://www.w3.org/TR/CSS2/cascade.html#cascading-order
In your example, width is 30em;
How you assign them in the class attribute has no bearing.
OK, so in particular you are referencing this part, I assume :
Finally, sort by order specified: if two declarations have the same
weight, origin and specificity, the latter specified wins.
Declarations in
imported style sheets are considered to be before any declarations in
the
style sheet itself.
Is that correct, Chris ?
Philip Taylor
--
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/
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
--
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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
I guess I should be more specific:
.c2.c1 {width: 100px}
.c1 {width: 50px;}
.c2 {width: 10px;}
Width will be 100px as specificity is more important than cascade.
On Tue, Oct 1, 2013 at 4:21 PM, Chris Rockwell ch...@chrisrockwell.comwrote:
That trumps .c2 or .c1 because it's more specific, but the cascade order
would still apply:
.c2.c1 {width:20px}
.c1.c2 {width:30px}
On Tue, Oct 1, 2013 at 4:15 PM, Tom Livingston tom...@gmail.com wrote:
Sorry...
correction:
.c2.c1{width: 20px}
?
On Tue, Oct 1, 2013 at 4:15 PM, Tom Livingston tom...@gmail.com wrote:
What about:
c2.c1{width: 20px}
?
On Tue, Oct 1, 2013 at 2:55 PM, Chris Rockwell ch...@chrisrockwell.com
wrote:
That is why it works that way, yes.
The engine sees two widths, both with the same weight, origin and
specificity; the last one to be declared will win.
If instead, you did:
div.c1 {width:20em}
.c2 {width:30em}
The width would be 20em, because div.c1 is more specific.
On Tue, Oct 1, 2013 at 2:51 PM, Philip Taylor p.tay...@rhul.ac.uk
wrote:
Chris Rockwell wrote:
http://www.w3.org/TR/CSS2/cascade.html#cascading-order
In your example, width is 30em;
How you assign them in the class attribute has no bearing.
OK, so in particular you are referencing this part, I assume :
Finally, sort by order specified: if two declarations have the same
weight, origin and specificity, the latter specified wins.
Declarations in
imported style sheets are considered to be before any declarations in
the
style sheet itself.
Is that correct, Chris ?
Philip Taylor
--
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/
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
--
Chris Rockwell
--
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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
At 20:17 +0100 on 10/01/2013, Philip Taylor wrote about Re: [css-d]
Two classes, two conflicting rules, which wins :
Chris Rockwell wrote:
That is why it works that way, yes.
The engine sees two widths, both with the same weight, origin and
specificity; the last one to be declared will win.
If instead, you did:
div.c1 {width:20em}
.c2 {width:30em}
The width would be 20em, because div.c1 is more specific.
Yes, the last example is clear; it was only the 'class=c1 c2'
about which I was uncertain.
Philip Taylor
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?
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.
__
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/
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 #00;
}
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/
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 c2C1 then C2/div
div id=i2 class=c2 c1C2 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 #00;
}
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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
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, c2C1 then C2/div
div id=i2 class=c2, c1C2 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 c2C1 then C2/div
div id=i2 class=c2 c1C2 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 #00;
}
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/
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, c2C1 then C2/div
div id=i2 class=c2, c1C2 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 c2C1 then C2/div
div id=i2 class=c2 c1C2 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 #00;
}
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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
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, c2C1 then C2/div
div id=i2 class=c2, c1C2 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 c2C1 then C2/div
div id=i2 class=c2 c1C2 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 #00;
}
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
Re: [css-d] Two classes, two conflicting rules, which wins ?
Le 2 oct. 2013 à 08:07, Karl Snyder k...@mountain-mall.com a écrit :
.c2 {background-color: green;}
.c1 {background-color: yellow;}
/style
/head
body
div id=i1 class=c1, c2C1 then C2/div
div id=i2 class=c2, c1C2 then C1/div
The 'class' attribute takes a space separated list of values:
http://www.w3.org/TR/html5/dom.html#classes
(same in an html 4 document as well).
When the browser parses the html doc it sees a class 'c1,' in the first div,
ignores it for the purpose of CSS styling (there is no such class in the
stylesheet, and applies the class 'c2'. Same reasoning applies for the second
div.
The comma is not valid in a class name in a CSS document.
http://www.w3.org/TR/CSS21/syndata.html
(particularly 4.1.3)
Philippe
--
Philippe Wittenbergh
http://l-c-n.com
__
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/
Re: [css-d] Two classes, two conflicting rules, which wins ?
Le 2 oct. 2013 à 08:56, Rick Gordon li...@rickgordon.com a écrit :
In answer to my previous message:
But if that's the case, this variant would not show red text for both:
…
style type=text/css
body { color:blue; }
.c2 {background-color:green; color:red;}
.c1 {background-color:yellow; color:red;}
/style
/head
body
div id=i1 class=c1, c2C1 then C2/div
div id=i2 class=c2, c1C2 then C1/div
/body
….
Why would it not show the colour as red? For the first div, the class 'c2' is
applied (and the class 'c1,' is ignored); for the second div the class 'c2,' is
ignored, the class 'c1' is applied.
The point is: in both div, the browser sees a classname that is a string
composed of 3 characters: 'c' '1' (or '2') and ','. The comma is part of the
string. That 3 character classname is not used in the stylesheet.
Now, you could specify somewhere in your stylesheet:
.c1, { background: red; color: white; }
This won't have any effect, as the string '.c1,' is invalid in css (see
css2.1:4.1.3 mentioned in my previous post).
However, you could escape that special character (the ','). Then the classname
would become a valid identifier / selector.
.c1\, { colour:black; background: cyan; }
Philippe
--
Philippe Wittenbergh
http://l-c-n.com
__
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/
