HTML Guides for first child

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

<div class="card">

<p>Card content</p>

<style>

@scope {

p {

color: darkslategray;

}

}

</style>

</div>

Valid example

<div class="card">

<style>

@scope {

p {

color: darkslategray;

}

}

</style>

<p>Card content</p>

</div>