I have the following code structure:-
<li class="container"> <div class="wrap"> <div class="green">...</div> </div> </li> <li class="container"> <div class="wrap"> <div class="xyz">...</div> </div> </li> .. .. so on Now li has the following css :-
margin-top:35px I don't want to inherit the above margin for li which contains the class green but I want it for the class xyz.
I have tried using operator > in css but it doesn't work.
If you dont want margin-top:35px to be applied (inherit from parent li) to div.green then here is the solution
CSS
.green { margin-top:-35px; } HTML
<li class="container"> <div class="wrap"> <div class="green">...</div> </div> </li> <li class="container"> <div class="wrap"> <div class="xyz">...</div> </div> </li> You can use :has() jQuery pseudo selector:
$('.container:has(.xyz)').css(...); With this code structure, assuming a parent container:
<ul> <li class="container"> <div class="wrap"> <div class="green">...</div> </div> </li> <li class="container"> <div class="wrap"> <div class="xyz">...</div> </div> </li> </ul> You could do this:
ul li:nth-child(2) { margin: 0; } https://developer.mozilla.org/en/docs/Web/CSS/:nth-child
But a rule to "If I have inside a div with xyz class then..." I think it is impossible in pure css.
I hope it helps.
There is no parent selector in css but you can use javascript:
$('.xyz').closest('.container').css('margin-top', '35px'); 
