Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Selects all elements inside elements with CSS
The descendant selector (space-separated) in CSS allows you to select all elements of a specific type that are nested inside another element, regardless of how deeply nested they are.
Syntax
ancestor descendant {
property: value;
}
Where ancestor is the parent element and descendant is the child element you want to style.
Example
The following example demonstrates how to style all <p> elements that are inside <div> elements −
<!DOCTYPE html>
<html>
<head>
<style>
div p {
color: white;
background-color: blue;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Demo Website</h1>
<h2>Fruits</h2>
<p>This paragraph is outside div - not styled.</p>
<div>
<p>This paragraph is inside div - will be styled.</p>
<section>
<p>This nested paragraph is also styled.</p>
</section>
</div>
</body>
</html>
A webpage displays with an h1 "Demo Website", h2 "Fruits", a normal black paragraph, then two blue paragraphs with white text and padding inside the div element (including the deeply nested one).
Key Points
- The descendant selector uses a space between element names
- It selects ALL matching descendants, not just direct children
- Elements outside the ancestor element remain unaffected
Conclusion
The descendant selector is powerful for styling elements within specific containers. It applies styles to all matching nested elements, making it useful for targeted styling of content sections.
Updated on: 2026-03-15T12:49:34+05:30
4K+ Views
Advertisements