Jump to content

Selector order


tomtallis
 Share

Recommended Posts

For some reason I have found that if I order the selectors in my style sheets in any order other than h1, h2, etc.., p; then those selectors that are out of order will be ignored. However when I try the same thing on W3's try-it editor it makes no diference. I am using notepad as the text editor and firefox as the browser.Any insights?Tomtallis

Link to comment
Share on other sites

The least I can say is that the stylesheet is parsed in the order that it is written, so what comes after a certain selecter, will be styled also after that certain selector. Say you have one certain <p> element (by class) text coloured red, and after that, all <p> elements colored blue. Then there will be no red <p> element :)Maybe those header elements have individual syntaxes, while maybe each header is interpreted by the former header. If that is so, it means each header is not an individual element. And changing the order, could cause browsers being confused what to do :) But this is just my personal idea :)

Edited by Dan The Prof
Link to comment
Share on other sites

Say you have one certain <p> element (by class) text coloured red, and after that, all <p> elements colored blue. Then there will be no red <p> element :)

Specifying a class gives higher priority, so in the case you describe, the <p> with a class will be red, and all others blue, no matter where the code for the red <p> is written. Specifiying class only can be overrun by element.class or #ID but not with element alone. I think (but I'm not completely sure) that specifying element1,element2 has lower priority then element1 alone. If that's the case you describe, you're right, but it's not a class, you know that :) .
Maybe those header elements have individual syntaxes, while maybe each header is interpreted by the former header. If that is so, it means each header is not an individual element. And changing the order, could cause browsers being confused what to do :blink: But this is just my personal idea :)

Huh? :blink: Edited by boen_robot
Link to comment
Share on other sites

Yes, classes do have priority, sorry.But do you understand what I mean? First defining a certain element, like with ID, and after that defining all elements with that same class a different style.(One element, and later the same element when part of a group)In such cases the style would be overriden.With the headers thing I mean the following. This is an idea, not based on knowledge or something. Maybe headers are part of a static list, that the headers are dependant on eachother when declared in a stylesheet :)

Edited by Dan The Prof
Link to comment
Share on other sites

I read the post to be this. Example 1&2 are the exact same except for the order of tags in <style>, when he changed the order the styles were not applied, this should not be the case as they are seperated by comma's which doesn't mean nesting. :)Example 1<head><style>h1, h2, p{color:red}</style></head><body><h1>Hello</h1><h2>How are you?</h2><p>Goodbye...</p></body>Example 2<head><style>h2, p, h1{color:red}</style></head><body><h1>Hello</h1><h2>How are you?</h2><p>Goodbye...</p></body>Both examples result in the text being coloured red, which you would expect :)

Link to comment
Share on other sites

This is the only order in which it will function correctly. Upon further review it seems that moving the order of the body selector is what really gums up the works. If the body selector is moved, the first selector will be ignored regardless of what it is.<head><style type="text/css">body {background-color:darkred}h1 {font-family:helvetica; color:white; font-size:170%}h2 {font-family:helvetica; color:white; font-size:140%; valign:top}p {font-family:arial; color:white; margin-left:20px}a {text-decoration:none; color:white}</style></body>Thanks,Tom

Link to comment
Share on other sites

<head><style type="text/css">h1 {font-family:helvetica; color:blue; font-size:270%}h2 {font-family:helvetica; color:green; font-size:140%;}p {font-family:arial; color:yellow; margin-left:120px}a {text-decoration:none; color:white}body {background-color:darkred}</style></head><body><h1>Hello</h1><h2>How Are You?</h2><p>I Am Fine</p><a href="#">click me</a></body>

I have just tried this out and it works fine, i moved body to the bottom of the list and h1 is styled correctly, this is working in both ff and ie.I noticed you closed the head section with a body tag, even with this mistake the code still worked.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...