Select elements which are not a child of something with a particular attribute property

Question

Essentially I want all "a" elements to be red, except in situation where they are a descendant child of an element with an attribute property of "data-foo".

This 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>

With this CSS:

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

In this example still selects both "a" elements. I also tried the following:

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

But I'm either getting nothing selected or all selected. Is this a possible selection to make?

possible duplicate of : https://stackoverflow.com/q/52481037/8620333 — Temani Afif, Jan 10 '19 at 21:06

Niloct · Answer 1 · 2019-01-10T21:24:23.613

2

You could add two rules, one for all A and the other for [data-foo] > a with color: unset; (or the specific color you want):

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>

edited Jan 10 '19 at 21:24

answered Jan 10 '19 at 20:56

Niloct

9,491
3
44
57

I was hoping to avoid this because I need to fall back to inherited styles (it might not be blue). Also, the 'a' isn't always a direct descendant of that particular attributed div (it could be multiple divs deep). – Matt Coady Jan 10 '19 at 21:15
1

Tough competition hehe. – Niloct Jan 10 '19 at 21:29

luenib · Answer 2 · 2019-01-10T20:55:48.717

1

Try this:

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

'Greater than' > selects immediate children

edited Jan 10 '19 at 20:55

answered Jan 10 '19 at 20:50

luenib

360
3
15

This is correct. Might be worth mentioning that the OP's code didn't work because the universal selector (the space character between `:not([data-foo])` and `a`) makes the rule as written apply to `a` tags which have *any ancestor* which does not have the `data-foo` attribute. – nvioli Jan 10 '19 at 21:00
Sorry, I should probably specify a little further. I want the :not to select anywhere up the lineage not just a direct child. – Matt Coady Jan 10 '19 at 21:12
So:
would still apply
– Matt Coady Jan 10 '19 at 21:13
@nvioli Yes the space was intentional, any ancestor is what I'm looking for – Matt Coady Jan 10 '19 at 21:17

score 0 · Accepted Answer · answered Jan 10 '19 at 21:20

0

easy - first set the more general rule (all anchors are red), and then make a specific exception (except for the ones that have an ancestor with the 'data-foo' attribute):

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

answered Jan 10 '19 at 21:20

matt lohkamp

2,174
3
28
47

Select elements which are not a child of something with a particular attribute property

3 Answers3