w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it

style scoped attribute

The scoped attribute on the style element:


  • scoped attribute is supported only in Firefox
  • is a required attribute if the style element is used in the body subtree
  • restrictions:
    - the content model of its parent element must not be transparent: e.g. not a, del, ins..;
    - the style element, scoped attribute present, must be the first child of its parent (no other flow content allowed in front of it)


3.scoped="",  , scoped <style scoped> CSS rules <⁄style>
<style scoped=""> CSS rules <⁄style>
<style scoped="scoped"> CSS rules <⁄style>

Video demonstration style scoped attribute

HTML5 style scoped attribute Tutorial

min video details
00:04 scoped attribute allows you to style a parent element and its children and their children and their children...
→ the whole parent subtree
00:15 while this style applies to the whole document
00:22 whole document: both aside elements are styled
00:35 this style scoped applies to:
- its parent element (aside) and<
- the parent subtree (p, sub, img)
00:49 only the 1st aside element is styled
00:55 styling only the 2nd aside element and its subtree
01:04 Restrictions:
<style scoped> ... <⁄style> must be the first child
e.g. the style element is the first child of its parent element, aside
01:10 Restrictions:
- when scoped attribute is present, the style element can be nested within the body subtree, otherwise is allowed only inside the head element
01:19 Restrictions:
- the content model of its parent must not be transparent: e.g. the content model of the aside element is not transparent (= aside children)
01:41 Example: aside content model not transparent
01:44 HTML5 elements with transparent content model
01:59 Example: a content model: transparent
02:21 Example: invalid syntax
02:30 Browser support test scoped attribute, style element
02:49 the scoped attribute on style element is currently supported in Firefox only
style intro style optional style browser display style parents - CSS rules style ELEMENT vs style ATTRIBUTE style syntaxstyle media attributestyle type attributestyle title attribute