0

Is it possible to add styles to parent element if child element has not selected class?

<style>
.parent:not(.parent > .child){
 color: red;
}
</style>
<div class="parent">Heading<span>1</span><div>
<div class="parent">Heading<span class="child">2</span><div>
Aliaga Aliyev
  • 415
  • 1
  • 6
  • 22
  • Duplicate of: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector. You can read more details regarding why in there – Obed Parlapiano Jun 16 '21 at 13:52

2 Answers2

0

No, CSS (and LESS) work from top to bottom and you cannot traverse back up the tree. This means that a child cannot dictate the styling of a parent.

You would have to define a class or id in the parent. For example:

<div class="parent modified-behaviour">Heading<span class="child">2</span><div>

LESS compiles to CSS and thus also lacks a parent selector.

Olaf
  • 1,038
  • 8
  • 20
0
With jQuery you can achieve it -
$(document).ready(function(){ 
$("div:not('.child')").parent(".parent").css("color","red");});
.parent() is for immediate parent and use .parents(), if it is a grand parent or 
great-great-grand parent.
user3719049
  • 41
  • 7