# A “style” element in “body” must be the first child of its parent.

> Canonical HTML version: https://rocketvalidator.com/html-validation/a-style-element-in-body-must-be-the-first-child-of-its-parent
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A `<style>` element in the `<body>` comes after other content inside its parent, but the HTML standard only allows it there as the parent's first child.

Since October 2026, a `<style>` element can sit in the `<body>` as long as its styles can't reach anything earlier in the page. Its style rules go inside an `@scope` block, which limits them to the parent of the `<style>` and everything inside it. Putting the `<style>` first in that parent means the browser has the styles before it renders any of the content they apply to.

Whitespace and comments before the `<style>` don't count, so indenting it or adding a comment above it is fine. Any element or text before it triggers the error, including a heading, a `<link>`, a `<script>` or another `<style>`. A `<style>` at the end of a container, or at the end of the `<body>`, breaks the rule as well. When two `<style>` elements sit next to each other, the second one is reported, so merge their rules into a single element.

To fix the error, move the `<style>` element up so it's the first thing inside its parent. An `@scope` block without a selector still applies to the same parent, so the styles keep matching the same elements. If the parent has to start with something else, such as a heading, wrap the content the styles target in a new element and put the `<style>` at the top of it. The scope then becomes that wrapper. Styles meant for the whole page belong in the `<head>`.

## Invalid example

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

## Valid example

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