将CSS选择器限制为最近的父选择器

Question

If I have this DOM structure

<div class="a b">
  <div class="c" id="c1">
    <div class="a">
      <div class="c" id="c2">
      </div>
    </div>
  </div>
</div>

I would like to create a selector like

.ab .c { ...}

And have it only apply to id=c1 and not id=c2 because the "a" element c2 is inside of doesn't have "b" too.

But currently c2 is also inside a much higher parent that has "a" and "b" so the selector applies.

Note that there could be more parents in the chain between "a" and "c". I could do this in Javascript/jquery but I'd like a pure CSS solution.

Answer 1

You can use child combinator selector > to target the child elements with a specific parent element - see a demo below where the #c1 is targeted with a red color & a pseudo element.

Now you can have the selector (see how a pseudo applies only to #c1 ), but the parent styles will be inherited. So you would have to reset the styles. ( color: initial in the demo below)

 .ab .c { color: initial; } .ab > .c { color: red; } .ab > .c:before { content: '1. '; } 

 <div class="ab"> <div class="c" id="c1">one <div class="a"> <div class="c" id="c2">two </div> </div> </div> </div>