tomtallis Posted June 12, 2006 Share Posted June 12, 2006 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 More sharing options...
scott100 Posted June 12, 2006 Share Posted June 12, 2006 Can you post some example code for us to look over?thanks Link to comment Share on other sites More sharing options...
Jack McKalling Posted June 13, 2006 Share Posted June 13, 2006 (edited) 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 June 13, 2006 by Dan The Prof Link to comment Share on other sites More sharing options...
boen_robot Posted June 13, 2006 Share Posted June 13, 2006 (edited) 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 But this is just my personal idea Huh? Edited June 13, 2006 by boen_robot Link to comment Share on other sites More sharing options...
Jack McKalling Posted June 13, 2006 Share Posted June 13, 2006 (edited) 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 June 13, 2006 by Dan The Prof Link to comment Share on other sites More sharing options...
scott100 Posted June 13, 2006 Share Posted June 13, 2006 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 More sharing options...
tomtallis Posted June 13, 2006 Author Share Posted June 13, 2006 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 More sharing options...
scott100 Posted June 13, 2006 Share Posted June 13, 2006 <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 More sharing options...
Jack McKalling Posted June 13, 2006 Share Posted June 13, 2006 Notice CSS is also a client-side language, which is dependant on what browser you are using Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now