| 1 | --- |
| 2 | name: scoped |
| 3 | description: Slide-scoped CSS styles |
| 4 | --- |
| 5 | |
| 6 | # Slide Scope Styles |
| 7 | |
| 8 | Define CSS that applies only to the current slide. |
| 9 | |
| 10 | ## Usage |
| 11 | |
| 12 | ```md |
| 13 | # This is Red |
| 14 | |
| 15 | <style> |
| 16 | h1 { |
| 17 | color: red; |
| 18 | } |
| 19 | </style> |
| 20 | |
| 21 | --- |
| 22 | |
| 23 | # Other slides are not affected |
| 24 | ``` |
| 25 | |
| 26 | ## Scoped by Default |
| 27 | |
| 28 | All `<style>` tags in slides are automatically scoped. |
| 29 | |
| 30 | Child combinators (`.a > .b`) don't work as expected due to scoping. |
| 31 | |
| 32 | ## Nested CSS with UnoCSS |
| 33 | |
| 34 | ```md |
| 35 | # Slidev |
| 36 | |
| 37 | > Hello **world** |
| 38 | |
| 39 | <style> |
| 40 | blockquote { |
| 41 | strong { |
| 42 | --uno: 'text-teal-500 dark:text-teal-400'; |
| 43 | } |
| 44 | } |
| 45 | </style> |
| 46 | ``` |
| 47 | |
| 48 | ## Global Styles |
| 49 | |
| 50 | For global styles, use `styles/index.css` in your project. |
| 51 |