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
How to Create a Combined Child Selector in SASS?
Sass (Systematically Awesome Style Sheets) is a CSS preprocessor that extends CSS with powerful features like variables, nesting, mixins, and inheritance. One of Sass's most useful features is the ability to create nested selectors, including combined child selectors that target direct children of elements.
Syntax
parent {
> child {
property: value;
}
}
What is a Child Selector?
A child selector (>) targets only the direct children of a parent element, not deeper nested descendants. In CSS, div > p selects only <p> elements that are immediate children of <div> elements.
Example: Basic Combined Child Selector
Here's how to create a combined child selector in Sass using the > symbol
<!DOCTYPE html>
<html>
<head>
<style>
/* Compiled from Sass */
.card > .header > .title {
color: #2c3e50;
font-size: 1.5rem;
font-weight: bold;
}
.card > .content {
padding: 20px;
background-color: #f8f9fa;
}
</style>
</head>
<body>
<div class="card">
<div class="header">
<h2 class="title">Card Title</h2>
</div>
<div class="content">
<p>This is the card content.</p>
</div>
</div>
</body>
</html>
A card with a dark blue title "Card Title" (1.5rem, bold) and light gray content area containing "This is the card content." appears on the page.
Sass Code Structure
The above CSS would be written in Sass as follows
.card {
> .header {
> .title {
color: #2c3e50;
font-size: 1.5rem;
font-weight: bold;
}
}
> .content {
padding: 20px;
background-color: #f8f9fa;
}
}
Example: Multiple Child Selectors
You can combine multiple child selectors for complex hierarchical targeting
<!DOCTYPE html>
<html>
<head>
<style>
/* Compiled from Sass */
.navigation > ul > li {
list-style: none;
display: inline-block;
margin: 0 10px;
}
.navigation > ul > li > a {
text-decoration: none;
color: #333;
padding: 8px 16px;
border-radius: 4px;
}
.navigation > ul > li > a:hover {
background-color: #007bff;
color: white;
}
</style>
</head>
<body>
<nav class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
A horizontal navigation menu with three links (Home, About, Contact) appears. Links are styled with padding and turn blue with white text on hover.
Benefits of Combined Child Selectors
Using combined child selectors in Sass provides:
- Specificity control: Target only direct children, not all descendants
- Clean nesting: Maintain readable, organized Sass code
- Efficient CSS: Generate precise selectors without unnecessary complexity
Conclusion
Combined child selectors in Sass allow you to create precise, hierarchical styles while maintaining clean, readable code. Use the > symbol within nested Sass structures to target only direct children of parent elements.
315 Views
