style scoped attribute
The scoped attribute on the style element:
- allows you to style an element and its subtree
- scoped is a specific attribute → can be applied ONLY on the next HTML5 element: style
Warnings
- 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)
Examples
| <style | attribute | = | "value(s)" | > | ... | <⁄style> | example |
|---|---|---|---|---|---|---|---|
| 3. | scoped | = | "", , scoped | < scoped> CSS rules <⁄> < scoped=""> CSS rules <⁄> < scoped="scoped"> CSS rules <⁄> |
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 |