css 兄弟外父组合器

Question

<div class="main">
  <div>
    <a class="_link _spec nta">Link one</a>
  </div>
  <div>
    <a class="_link _spec">Link two</a>
  </div>
</div>

I want to select the second anchor element but, I'm having problem. All I want is to select it based on the first anchor if it contains.nta class

._spec.nta + a { color:red; }

I tried this but it works only if the element is next to it.

Answer 1

Basically, you have two options:

1. Move class names from a element to div element. It would look like this:

 .nta +._spec{ color: red; }

 <div class="main"> <div class="_spec nta"> <a class="_link">Link one</a> </div> <div class="_spec"> <a class="_link">Link two</a> </div> </div>

2. Using:not() property:

 ._link._spec:not(.nta) { color: red; }

 <div class="main"> <div> <a class="_link _spec nta">Link one</a> </div> <div> <a class="_link _spec">Link two</a> </div> </div>

Good luck!