8

I have seen:

They all seem to say that, for the same selector occurring multiple times, the last one wins. However that is not what happens for me. So given that "Aqua.css" has:

body {color:aqua;}

And "Red.css" has:

body {color:red;}

Then using the following:

<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/>
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/>
<style type="text/css">
body {color: lime;}
body {color: yellow;}
</style>

The last one, Yellow, is used, as the other answers say. If I change that however to:

<style type="text/css">
body {color: lime;}
body {color: yellow;}
</style>
<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/>
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/>

Then Aqua is used, not the last one, Red. See Precedence of CSS rules Sample 2. The body color is Aqua yet Aqua.css is before Red.css. All the answers I find say that the body color would be Red.

Whenever I have multiple links to css stylesheets and the only difference among them is the color of something (element or class or whatever) then the first stylesheet is used, not the last, yet that seems to not be what everything I read says should happen. I have tried Edge, Chrome and IE; I notice no relevant difference among them.

So I have the following two questions:

  • Am I correct that the behavior I am seeing (the first link tag is used instead of the last) is different from the other answers?
  • If so, then why?

I apologize if I should have posted an answer to one of the other threads, but I think it is cleaner to create a new question.

The reason I am asking is that I am trying to create a dynamic stylesheet system so understanding the precedence is more important, it is less effective to just try something to see what works than in normal circumstances. I will attempt to interpret the specifications but to the extent that has been in other answers, I want to understand what has been provided here in other threads.

Inigo
  • 12,186
  • 5
  • 41
  • 70
Sam Hobbs
  • 2,594
  • 3
  • 21
  • 32
  • 1
    I believe the answer will be that there is no guarantee which stylesheet will be loaded first and in which order the body properties will be set. It's why you should not do things this way. – Rob Apr 03 '16 at 03:02
  • 4
    @Rob, "there is no guarantee which stylesheet will be loaded first" loading order has nothing to do with it. *As long as all stylesheets have loaded*, the DOM ordering strictly defines which styles will be applied. There is no fuzzy logic or guesswork involved. – zzzzBov Apr 03 '16 at 03:28
  • @zzzzBov I'm not so sure about that and I'm trying to recall an article I read some time ago about no guarantee of what gets applied first. If you have two external stylesheets, both containing identical CSS properties for the same element as in this question, and the second stylesheet finishes downloading before the first, which gets applied? If I could recall for sure, I would make this an answer but I don't have time now to try and find this. It's possible what I'm thinking of does not apply to this but it's something that could be looked into. – Rob Apr 03 '16 at 11:51
  • "If you have two external stylesheets, both containing identical CSS properties for the same element as in this question, and the second stylesheet finishes downloading before the first, which gets applied?" [the spec is clear that the order of declaration is what is used to determine which styles are applied.](https://www.w3.org/TR/CSS21/cascade.html#cascading-order) – zzzzBov Apr 03 '16 at 15:57

1 Answers1

12

Disclaimer: My old answer and line of thinking was completely wrong, so I've deleted it, and am posting this as a replacement so as not to be confused with any of the prior discussion.

When you give a <link> element a title attribute, you are defining it as an alternative style sheet set.

<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/>
                                                       ^^^^^^^^^^^^
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/>
                                                      ^^^^^^^^^^^

The precedence of styles was a red herring. The Red.css styles were never being applied at all, because that style sheet set was not currently active.

Per the spec:

Also, the title attribute has special semantics on this element: Title of the link; alternative style sheet set name.

Also worth reading: "CSS: alternative style sheets":

A document doesn't need to have a single style sheet. You can give it a default style and any number of alternatives for the reader to choose from. This page, for example, has as alternatives all the W3C Core Styles, plus two style sheets found elsewhere on the Web (author: David Baron).

How the reader can select the alternatives depends on the browser. Not all browsers yet offer a menu for it, but many do. E.g., in Opera, Internet Explorer and Firefox you can find the styles under the “View” menu. As of 2012, Chrome requires an extension (e.g., Decklin Foster's Style Chooser).

You're supposed to use rel="alternative stylesheet" when defining alternative stylesheets, but this appears to be a case where the browser anticipated the behavior. Remove the title attributes, and the <link> elements return to their standard behavior as defined in the spec.

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
  • 1
    Thank you. Your mistake is forgiven, mistakes happen. Please understand how frustrating it is to know that something is happening and other people overlook what I see. I hope you understand what I mean. Also, CSS seems unnecessarily complex. I don't understand most of what you say here (I will continue to learn) but the important thing is that the title is the "problem". Now I know that the title attribute is more relevant than some people would realize and I hope this helps others too. – Sam Hobbs Apr 04 '16 at 16:07