Выберите элементы, которые не являются потомками чего-либо с определенным свойством атрибута

Question

По сути, я хочу, чтобы все элементы "a" были красными, за исключением ситуации, когда они являются дочерними элементами элемента со свойством атрибута "data-foo".

Это HTML:

<div data-foo="whatever">
  <div>
    ... more descendants 
       <a href="#">I should be default color</a>
  </div>
</div>

<a href="#">I should be red</a>

С этим CSS:

:not([data-foo]) a {
  color: red;
}

В этом примере по-прежнему выбираются оба элемента "a". Я также попробовал следующее:

div:not([data-foo]) a
*:not([data-foo]) a
div:not([data-foo]) a
*:not(div[data-foo]) a

Но я либо ничего не выбрал, либо все выбрал. Это возможный выбор?

Answer 1

Вы можете добавить два правила, одно для всех A, а другое для [data-foo] > a с color: unset; (или нужным вам конкретным цветом):

A {
    color: red;
}

[data-foo]  A {
    color: inherited; 
}

<div data-foo="whatever">
  <a href="#">I should be default color</a>
</div>

<a href="#">I should be red</a>    

Answer 2

easy - сначала установите более общее правило (все якоря выделены красным), а затем сделайте конкретное исключение (за исключением тех, которые имеют предка с атрибутом data-foo):

a { color:red; }
[data-foo] a { color:inherit; }

Answer 3

Попробуйте это:

:not([data-foo]) > a {
  color: red;
}

«Больше чем»> выбирает непосредственных детей