- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - Pseudo-class :scope
The CSS pseudo-class :scope stands for elements that serve as a reference point, allowing selectors to access elements within a given scope. This feature is especially valuable for modular and component-based web development.
By using :scope, CSS styles can be contained within a specific subtree of the document, preventing them from affecting other elements outside that scope.
This isolation ensures that the styles for a particular component do not conflict with or get overridden by the styles of other components on the same page.
This modularity improves code maintainability and reduces the likelihood of unintended style conflicts in complex web applications.
Syntax
:scope { /* css declarations */ }
CSS :scope - Basic Example
The following example demonstrates the use of :scope pseudo-class.
<html> <head> <style> :scope h1 { color: red; background-color: lightblue; font-size:50px } :scope p { color: blue; background-color: beige; font-size:20px } </style> </head> <body> <div> <h1>This is a heading</h1> </div> <div> <p>This is a paragraph</p> </div> </body> </html>
CSS :scope - Identity match
When used in a stylesheet, :scope is the same as :root, since there is currently no way to explicitly specify a scoped element.
When used with DOM API, such as querySelector(), querySelectorAll(), matches(), or Element.closest(), :scope matches the element on which the method was invoked.
Example
The following example demonstrates the usage of the :scope pseudo-class and the Element.matches() method.
The :scope pseudo-class is used to select the current element within a complex selector.
In this example, we apply the color: red; style to the :scope pseudo-class, which targets the div element.
The Element.matches() method in script is used to check if an element matches a specific selector.
<html> <head> <title>:scope and Element.matches() Example</title> <style> :scope { color: red; font-size: 20px } </style> </head> <body> <div> <p>This is a paragraph.</p> <ul> <li>This is list item 1</li> <li>This is list item 2</li> <li>This is list item 3</li> </ul> </div> <script> const listItems = document.querySelectorAll('li'); listItems.forEach(item => { if (item.matches(':scope')) { item.style.backgroundColor = 'yellow'; } }); </script> </body> </html>
To Continue Learning Please Login
Login with Google