Apply style to parent if it has child with CSS

css

responsive-design

best-practices

polyfills

byNikita Barsukov·Jan 2, 2025

To target a parent if it has a certain child, use JavaScript. Specifically, select the child with .querySelectorAll and traverse up the DOM tree to the parent using .closest.

Example:

// Add 'has-child' class to parents that have kids (not just in real life)
document.querySelectorAll('.child').forEach(el =>
  el.closest('.parent').classList.add('has-child')
);

Now apply CSS styles to the modified parent using the added class:

/* Time for parents with children to shine */
.parent.has-child { background-color: yellow; }

Practical methodologies and future scope

Adaptation is key in web development. While currently, CSS alone can't style a parent based on its children, we have workable aha! moments and glimpses into the future.

:has() selector – the torchbearer for future CSS

The :has() selector, a ray of hope, enables conditional parent styling based on specific children:

/* Make way for future CSS standard */
.parent:has(> .child) { background-color: aquamarine; }

However, as of now, it's still in the proposal stage and lacks cross-browser support. Hence, always validate browser compatibility before experimenting with tantalizing new features like these.

jQuery – the knight in shining armor

For those seeking browser agnosticism, jQuery is your gallant knight:

// jQuery to the rescue for parents with kids  
$('.parent:has(.child)').addClass('has-child');

Style it as simply as with pure CSS. This approach ensures that your code constantly wins the beauty pageant – it’s clean, efficient, easy on the eyes, and easily maintainable.

CSS wishing wells: the $ selector

CSS speculations are anything except silent. One such whisper is about the $ selector which might target parents in future – akin to how the & symbol works in SASS:

/* Here's a sneak peek into potential future syntax */
$parent > .child { background-color: gold; }

Stay at the forefront of CSS updates to embrace such fascinating additions.

Best practices and potential pitfalls

Embracing future CSS features such as the :has() selector can feel like stepping onto the red carpet, but not without a few precautions:

Remember to validate browser support before implementing advanced features.
Adhere to progressive enhancement, starting with a universally compatible basic implementation, and then layering enhancements for browsers that can handle them.
Explore polyfills as a bridge to cover the gap between CSS advancements and browser support.

Going beyond your basic toolkit

As developers, we should strive to learn more and adapt to evolving technologies. Applying styles to parents based on child elements is just a stepping stone.

Embrace the future but don't forget the present

Welcome changes like :has(), while having backup plans in place. This ensures compatibility and robustness even in the face of browser updates.

Easy-to-read code never goes out of style

Regardless of the methods you use, prioritize writing code that the average developer can read without scratching their heads. Be relevant. Be readable. Be maintainable.

Learn from others

Actively participate and learn from community discussions. Resources like CSS-Tricks, Smashing Magazine, and others can be a learning curve for understanding and implementing advanced CSS selectors.

explain-codes / Css / Apply style to parent if it has child with CSS

Linked

Apply CSS styles to an element depending on its child elements



Target a CSS class inside another CSS class



Is there a CSS selector for the first direct child only?



How to create a <style> tag with Javascript?



Can I use non existing CSS classes?

