A jQuery plugin to enable the scoped attribute on style blocks
Clone or download
Latest commit b39f951 Sep 12, 2013
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Create LICENSE Sep 12, 2013
README.md Removing note about single-run limitation Apr 10, 2013
external.css Initial commit Jan 30, 2011
index.html Updated demo page to to include rerunability Apr 10, 2013
jquery.scoped.js Added scope reset to allow multiple calls Apr 10, 2013


jQuery Scoped CSS plugin

This adds support for the scoped attribute to limit a block of style declarations to a specific area of the HTML. You can also use @import and media filters in scoped blocks.


Include this plugin file (minified, ideally) and call $.scoped() on load. If you add style blocks to the page later, you need to rerun the plugin.

Any style blocks with the scoped attribute are processed and limited to only affect their parent's children:

<p>This will be black.</p>
 <style scoped>
   p {color:red;}
 <p>This will be red.</p>


  • If you're using multiple nested declarations, Webkit might apply different inheritance specificity rules from the other engines. I don't know who's right.
  • Remember, IE < 9 support requires a helping hand if you're using HTML 5 elements
  • Currently, getElementStyles is hand-rolled and possibly wrong.
  • Sometimes there are delays parsing externally loaded stylesheets (via @import) and they might get skipped. Not often but it happens.


  • If the browser natively supports style scoped, this will return without doing anything
  • Style elements really shouldn't have classes added to them. This bit of the functionality should probably use some kind of data attribute.
  • The scoped blocks are emptied out for non-IE browsers because currently only IE supports the 'disabled' attribute.
  • Opera exhibits a short delay (~20ms) when resolving styles included via @import. There's a forced delay to counter this.
  • Opera seems to add an extra content:none on text nodes.