scope property

Author admin Reading 2 min Views 378 Published by July 30, 2012 Modified by September 30, 2024

Contents

Definition and Usage
Syntax
Examples
Compatibility
Desktop browsers
Mobile browsers

Definition and Usage

The :scope CSS pseudo-class matches the elements that are a reference point for selectors to match against. In HTML, a new reference point can be defined using the scoped attribute of the <style>. If no such attribute is used on an HTML page, the reference point is the <html> element, making :scope equivalent to :scope

Syntax

:scope { style properties }

Examples

<article> 
  
  The element selected by :scope has a lime background if your browser supports scoped stylesheet. 
  
  <section> 
  
    <p>Outside scope.</p> 
  
  </section> 
  
  <section> 
  
    <style scoped> 
  
      :scope { background-color: lime; } 
  
    </style> 
  
    <p>Inside scope.</p> 
  
  </section> 
  
<section> 
  
    <p>Outside scope.</p> 
  
  </section 
  
</article>