f



Order of CSS Declarations

   Why is the order of CSS declarations so important?  In the following 
<style> declaration, the order of the a:link is critical to its being 
used.  The effects desired are correct in this code, but when the two a:
* lines of code are moved to before the "div" declaration, they are 
ignored!
   There must be some explicit hierarchy of CSS declarations that I 
haven't seen - what is it and where is it explained?  Please advise.

<style>
  body { margin: 0 40px 0 40px; 
         font: Verdana; font-size: 120%; color: black; 
	 background-image: url("bg-green-grass.jpg");
       }
  a:link,  a:visited { color: gold; }
  a:hover, a:active  { color: lightblue; }	
  p { text-indent: 30px; font-size: 120%;  
      margin-right: 10px; margin-left: 10px; }
  .b8  { border-color:  black; 
         border-style:  outset; 
         border-width:  15px;
 	 font-size:     120%;
	 font-weight:   bold;
	 width:         100%; 
       }
  td   {
         padding-left:  20px;
         padding-right:  0px;
         padding-top:    0px;
         padding-bottom: 0px;
       }
  .c3  { color: gold; background-image: url("RedBrick.jpg");  )
  .center { text-align: center; }
  div     { margin-left: 50px; margin-right: 50px; }
  td.nil  { padding: 0; }
</style>



---
This email has been checked for viruses by Avast antivirus software.
https://www.avast.com/antivirus

0
Mike
9/4/2016 12:28:35 AM
comp.authoring.stylesheets 8158 articles. 0 followers. mdmoura (161) is leader. Post Follow

5 Replies
135 Views

Similar Articles

[PageSpeed] 55

In article <MPG.3235189f2ce8d3f09896d1@news.eternal-september.org>,
 Mike Copeland <mrc2323@cox.net> wrote:

>    Why is the order of CSS declarations so important?  In the following 
> <style> declaration, the order of the a:link is critical to its being 
> used.  The effects desired are correct in this code, but when the two a:
> * lines of code are moved to before the "div" declaration, they are 
> ignored!
>    There must be some explicit hierarchy of CSS declarations that I 
> haven't seen - what is it and where is it explained?  Please advise.

Order matters when there are conflicting items that affect the same 
element. But a:XXX and div can't refer to the same element, so I don't 
think it can possibly matter. I suspect you had a syntax error in the 
version where they were above div. But since you posted the working 
version, not the non-working one, we can't tell what you did wrong.

Can you make a demonstration at jsfiddle.net?

> 
> <style>
>   body { margin: 0 40px 0 40px; 
>          font: Verdana; font-size: 120%; color: black; 
> 	 background-image: url("bg-green-grass.jpg");
>        }
>   a:link,  a:visited { color: gold; }
>   a:hover, a:active  { color: lightblue; }	
>   p { text-indent: 30px; font-size: 120%;  
>       margin-right: 10px; margin-left: 10px; }
>   .b8  { border-color:  black; 
>          border-style:  outset; 
>          border-width:  15px;
>  	 font-size:     120%;
> 	 font-weight:   bold;
> 	 width:         100%; 
>        }
>   td   {
>          padding-left:  20px;
>          padding-right:  0px;
>          padding-top:    0px;
>          padding-bottom: 0px;
>        }
>   .c3  { color: gold; background-image: url("RedBrick.jpg");  )
>   .center { text-align: center; }
>   div     { margin-left: 50px; margin-right: 50px; }
>   td.nil  { padding: 0; }
> </style>
> 
> 
> 
> ---
> This email has been checked for viruses by Avast antivirus software.
> https://www.avast.com/antivirus

-- 
Barry Margolin, barmar@alum.mit.edu
Arlington, MA
*** PLEASE post questions in newsgroups, not directly to me ***
0
Barry
9/4/2016 2:05:09 AM
On 04/09/2016 05:05, Barry Margolin wrote:
> In article <MPG.3235189f2ce8d3f09896d1@news.eternal-september.org>,
>  Mike Copeland <mrc2323@cox.net> wrote:
>>    There must be some explicit hierarchy of CSS declarations that I
>> haven't seen - what is it and where is it explained?  Please advise.
>
> Order matters when there are conflicting items that affect the same
> element.

To be a bit more precise: order matters *only* when conflicting 
declarations for the same media have equal origin, importance and 
specificity, as is the case with the OP's code:

> <style>

1) There's no media attribute, nor @media rule in the code so by default 
the styles apply to all media. The OP should consider if the styles are 
appropriate for different media.

>>   a:link,  a:visited { color: gold; }
>>   a:hover, a:active  { color: lightblue; }	

2) The declarations come from an author style sheet and are not thus 
they have equal weight due to their origin. The OP should consider if 
obscuring coloring clues between visited and unvisited links is desirable.

3) No declarations are annotated !important, thus they have equal weight 
due to their importance (or lack of).

4) The selectors (type:pseudo-class) are equally specific.

IOW, the order of the declarations comes to play only as the last resort 
of the cascade algorithm.

https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

Here the order is specially relevant because links may be 
simultaneously, say, in a hovered state and a visited state, and if the 
order is changed, the :visited would override the :hover.

-- 
Best wishes, Osmo
0
Osmo
9/4/2016 8:29:40 AM
Mike Copeland wrote:

>    Why is the order of CSS declarations so important? 

Because top-to-bottom, left-to-right, is the reading order in English.
The /ligua franca/ of computer technology is English, and the inventors of 
CSS wanted the language to be easily understandable for humans.  So in 
general, later declarations override previous ones.

However, AISB, this only either applies to rulesets whose selectors have the 
same specificity, or to property declarations where either none has or both 
have the “!important” modifier.  This also was done to make the language 
easier to use (if you are more specific, you want that to take precedence), 
but can have counter-intuitive results.

>    In the following <style> declaration,

You should be using the ”style” element sparingly; not as sparingly as the 
“style” attribute, but more sparingly than “link” elements and other ways to 
refer to stylesheet resources.

> the order of the a:link is critical to its being used.  The effects 
> desired are correct in this code, but when the two a:
> * lines of code are moved to before the "div" declaration, they are
> ignored!

In a conforming layout engine, this is not possible except with 
syntactically invalid code.

The only property declared in those two rulesets is “color”:

>   a:link,  a:visited { color: gold; }
>   a:hover, a:active  { color: lightblue; }

There is only one other ruleset that contains a “color” declaration:

>  .c3  { color: gold; background-image: url("RedBrick.jpg");  )

The specificity S of either (ungrouped) selector of the two rulesets is 11 
(using the measurement detailed in CSS3 Selectors, § 9):

  a:link, a:visited 
  | \ 
  |  pseudo-class selector: b = 10
  |
  type selector: c = 1

  S = a + b + c = b + c = 11.

The specificity of the selector of the single ruleset is 10:

 .c3
  \
   class selector: b = 10

  S = a + b + c = b = 10.

That is lower than 11.  Thus, in a conforming layout engine, it cannot 
override the “color” declaration in the two rulesets above, no matter where 
they are.

Use <http://jigsaw.w3.org/css-validator/>, a validating source code editor 
like <http://atom.io/> with the linter-csslint package, and your browser’s 
developers tools (<http://devtoolsecrets.com/>) to find out what is going 
on.

>    There must be some explicit hierarchy of CSS declarations that I
> haven't seen - what is it and where is it explained?  Please advise.

STFW for “css selector specificity”.
 
> […]

This CSS code is not of much use without the markup it is going to be 
applied to.

> ---
> This email has been checked for viruses by Avast antivirus software.
> https://www.avast.com/antivirus

Please fix.


PointedEars
-- 
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
  -- Richard Cornford, cljs, <cife6q$253$1$8300dec7@news.demon.co.uk> (2004)
0
Thomas
9/4/2016 9:50:28 AM
At 17:28:35 on Sat, 3 Sep 2016, Mike Copeland <mrc2323@cox.net> wrote in 
<MPG.3235189f2ce8d3f09896d1@news.eternal-september.org>:

>   Why is the order of CSS declarations so important?  In the following
><style> declaration, the order of the a:link is critical to its being
>used.  The effects desired are correct in this code, but when the two a:
>* lines of code are moved to before the "div" declaration, they are
>ignored!
>   There must be some explicit hierarchy of CSS declarations that I
>haven't seen - what is it and where is it explained?  Please advise.
>
><style>
>  body { margin: 0 40px 0 40px;
>         font: Verdana; font-size: 120%; color: black;
>        background-image: url("bg-green-grass.jpg");
>       }
>  a:link,  a:visited { color: gold; }
>  a:hover, a:active  { color: lightblue; }
>  p { text-indent: 30px; font-size: 120%;
>      margin-right: 10px; margin-left: 10px; }
>  .b8  { border-color:  black;
>         border-style:  outset;
>         border-width:  15px;
>        font-size:     120%;
>        font-weight:   bold;
>        width:         100%;
>       }
>  td   {
>         padding-left:  20px;
>         padding-right:  0px;
>         padding-top:    0px;
>         padding-bottom: 0px;
>       }
>  .c3  { color: gold; background-image: url("RedBrick.jpg");  )
>  .center { text-align: center; }
>  div     { margin-left: 50px; margin-right: 50px; }
>  td.nil  { padding: 0; }
></style>

Your brackets don't match.  The closing bracket on .c3 is set to ) 
rather than to }, so anything after that is not going to be recognised 
or implemented as you intended them to be - including your a:link etc. 
if you move them to a position within that section, as you would have 
done if you put them before the div line.
-- 
Molly Mockford
Nature loves variety. Unfortunately, society hates it. (Milton Diamond Ph.D.)
(My Reply-To address *is* valid, though may not remain so for ever.)
0
Molly
9/4/2016 1:22:47 PM
Molly Mockford wrote:

> […] Mike Copeland […] wrote […]:
>> […]
>>  .c3  { color: gold; background-image: url("RedBrick.jpg");  )
>> […]
> 
> Your brackets don't match.  The closing bracket on .c3 is set to )
> rather than to }, […]

Good catch.


PointedEars
-- 
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee
0
Thomas
9/4/2016 11:31:28 PM
Reply: