# Style rule X not allowed outside an “@scope” rule in a “style” element in “body”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/style-rule-x-not-allowed-outside-an-scope-rule-in-a-style-element-in-body
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A `<style>` element in the `<body>` contains a CSS style rule that isn't inside an `@scope` block.

Since October 2026, the HTML standard allows `<style>` in the `<body>` as long as its styles can't reach anything earlier in the page. That means every style rule has to sit inside an `@scope` block with nothing between `@scope` and the opening brace. Without a selector, `@scope` applies to the parent element of the `<style>` and everything inside it, so `p` only matches the paragraphs in that parent. A top-level rule like `.card p` could restyle any paragraph on the page, including ones the browser has already drawn.

Style rules nested in `@media`, `@supports` or `@container` count too. Put those at-rules inside the `@scope` block, or put an `@scope` block inside them. At-rules that don't select elements, like `@font-face` and `@keyframes`, can stay at the top level. Two other limits apply to a `<style>` in the `<body>`: it can't contain `@import`, and it must be the first child of its parent.

To fix the error, wrap the rules in `@scope { }` and drop the part of each selector that pointed at the parent. Inside the block, `:scope` matches the parent element itself. Writing a selector after the keyword, as in `@scope (.card)`, triggers a different error unless that rule is nested in another `@scope`. If the styles need to apply to the whole page, move the `<style>` element into the `<head>`.

## Invalid example

```html
<div class="card">
  <style>
    .card p {
      color: darkslategray;
    }
  </style>
  <p>Card content</p>
</div>
```

## Valid example

```html
<div class="card">
  <style>
    @scope {
      :scope {
        padding: 1rem;
      }

      p {
        color: darkslategray;
      }
    }
  </style>
  <p>Card content</p>
</div>
```
