CSS :scope pseudo-class

The :scope pseudo-class makes more sense when it’s tied to the scoped HTML attribute in a <style> tag. If there is no scoped attribute in a <style> tag within a section of the page, then the :scope pseudo-class will scope all the way out to the <html>, which is the default scope of a style sheet.

Note: Firefox is the only one that supports this pseudo-class. That’s why we see this text in italics in all other browsers.

In the following example, this HTML block has a scoped style sheet in the markup. All text inside the second <section> will be in italics:

Section 1 Heading

Lorem ipsum dolor sit amet.

Section 2 Heading

This text will be italicized.