CSS - How to only apply a style to a div that is inside another div?
Categories:
Targeting CSS Styles: Applying Styles to Nested Divs

Learn how to precisely apply CSS styles to a div
element only when it is nested inside another specific div
, using various CSS selectors.
In web development, it's common to have complex HTML structures where elements are nested within one another. When styling these elements with CSS, you often need to apply styles conditionally â for instance, only to a div
that resides within another particular div
. This article will guide you through the fundamental CSS selectors that enable this precise targeting, ensuring your styles are applied exactly where you intend them to be.
Understanding Descendant Selectors
The most common and straightforward way to apply a style to an element that is inside another element is by using a descendant selector. A descendant selector targets an element that is a descendant of another specified element, regardless of how many levels deep it is nested. This is achieved by simply placing a space between the two selectors.
.parent-div .child-div {
background-color: lightblue;
padding: 10px;
border: 1px solid blue;
}
CSS using a descendant selector to style .child-div
inside .parent-div
.
<div class="parent-div">
<p>This is a parent paragraph.</p>
<div class="child-div">
This div will have the lightblue background.
</div>
<div>
<div class="child-div">
This div will also have the lightblue background (nested deeper).
</div>
</div>
</div>
<div class="another-div">
<div class="child-div">
This div will NOT have the lightblue background.
</div>
</div>
HTML structure demonstrating the effect of the descendant selector.
Using the Child Combinator for Direct Children
If you need more specificity and only want to style a div
that is an immediate child of another div
, you should use the child combinator (>
). This selector will only apply styles to elements that are direct children, not to elements nested further down the hierarchy.
.parent-div > .direct-child-div {
border: 2px solid green;
color: darkgreen;
}
CSS using the child combinator to style a direct child div
.
<div class="parent-div">
<div class="direct-child-div">
This div will have a green border (direct child).
</div>
<div>
<div class="direct-child-div">
This div will NOT have a green border (not a direct child).
</div>
</div>
</div>
HTML demonstrating the child combinator's effect on direct children.
flowchart TD A["Parent Div (.parent-div)"] --> B["Child Div (.child-div)"] A --> C["Another Div"] C --> D["Child Div (.child-div)"] style B fill:#add8e6,stroke:#0000ff,stroke-width:2px style D fill:#ffffff,stroke:#333,stroke-width:1px subgraph Descendant Selector A -- "space" --> B A -- "space" --> D end E["Parent Div (.parent-div)"] --> F["Direct Child Div (.direct-child-div)"] E --> G["Intermediate Div"] G --> H["Direct Child Div (.direct-child-div)"] style F fill:#90ee90,stroke:#008000,stroke-width:2px style H fill:#ffffff,stroke:#333,stroke-width:1px subgraph Child Combinator E -- ">" --> F E -- ">" X H end
Comparison of Descendant Selector vs. Child Combinator.
Combining Selectors for Advanced Targeting
You can combine these selectors with other CSS selectors (like ID selectors, attribute selectors, or pseudo-classes) to create highly specific rules. For example, you might want to style a div
with a specific class, but only when it's inside a div
that has a particular ID.
#main-container .highlighted-item {
font-weight: bold;
color: #cc0000;
}
.card-wrapper > div.active {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
Examples of combining ID, class, and child selectors.
Remember that CSS specificity rules apply. More specific selectors will override less specific ones. Understanding the cascade and specificity is crucial for predicting how your styles will be applied.