Closed Bug 904999 Opened 6 years ago Closed 6 years ago
Scoped styles are not obeying CSS specificity rules
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:22.0) Gecko/20100101 Firefox/22.0 (Beta/Release) Build ID: 20130618035212 Steps to reproduce: 1. Create a scoped style underneath the body tag 2. Create a rule with low specificity (e.g. just a class selector) within the scoped stylesheet. 3. Create a stylesheet in the head of the document with a higher specificity CSS rule (e.g. ID), overriding the property set on the scoped style. A working example of the bug can be found at: http://jsfiddle.net/r2DTT/ Actual results: The lower specificity CSS rule was applied. Expected results: The higher specificity CSS rule should be applied to the element as per the W3 specification (which does not state that scoped rules should take precedence over non-scoped rules). http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#attr-style-scoped
Thanks for the bug report. However, I don't think this is a bug. Non-scoped rules should be treated the same as scoped rules where the scope is the root element. In your test, the <style scoped> element is a child of the <body> of the document, while the external style sheet is a non-scoped style sheet, so equivalent to a <style scoped> element that is a child of the <html> element. Since the scope of the <style scoped> element is within the scope of the external style sheet, the inner scope rules should always win over the outer scope, regardless of specificity. I'm basing this on http://dev.w3.org/csswg/css-cascade/#cascading.
Status: UNCONFIRMED → RESOLVED
Closed: 6 years ago
Resolution: --- → INVALID
I hadn't read that part of the spec, but it's quite clear. Thanks for the help and please accept my apologies.
You need to log in before you can comment on or make changes to this bug.