- HTML Tutorial
- HTML - Home
- HTML - Overview
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Comments
- HTML - Images
- HTML - Tables
- HTML - Lists
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Backgrounds
- HTML - Colors
- HTML - Fonts
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- HTML - Fonts Ref
- HTML - Events Ref
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
How to specify that the styles only apply to this element's parent element and that element's child elements in HTML?
Use the scoped attribute to specify that the styles only apply to the parent element and the element’s child elements −
Example
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color:yellow;
}
</style>
</head>
<body>
<div>
<style scoped>
h2 {
color:grey;
}
</style>
<h2>Grey Heading</h2>
</div>
<h2>Yellow Heading</h2>
</body>
</html>
- Related Articles
- How to specify that the element is read-only in HTML?
- Style every element that is the only child of its parent with CSS
- How to specify the language of the element's content in HTML?
- Style every element that is the only element of its parent with CSS
- Select every element that is the second element of its parent, counting from the last child
- How to return true if the parent element contains the child element in JavaScript?
- How to specify that an element is not yet relevant in HTML?
- Style every element that is the second child of its parent with CSS
- How to get the child element of a parent using JavaScript?
- How to specify that the element should automatically get focus when the page loads in HTML?
- How to specify that the element must be filled out before submitting the form in HTML?
- Style every element that is the child of its parent, counting from the last child with CSS
- How to specify that an element should be pre-selected when the page loads in HTML?
- Align an element with the bottom of the parent element's font in Bootstrap 4
- Align an element with the top of the parent element's font in Bootstrap 4
Advertisements