CSS selector :not(...) [parent has some class]

Question

I want to select all tags with class p, that is child of .row

.row .p {
   ...
}

but exclude all, that have .disable as parent class (not directly).

I can select both of them like that:

.row .p {
  border: 3px solid blue;
}

.disable .row .p {
  border: 3px solid red;;
}

But we want to use just one selector

NOTE: between .disable and .row can be any elements.

CLEARIFICATION: .disable .row .p should have no color at all. So if .disable is present somehow in the parent line do NOT make a blue border. just leave it away.

example: https://codepen.io/miladfm/pen/ELbwMx

there is no parent selector neither and ancestor selector too — Temani Afif, May 07 '18 at 14:00
Do you mean like this `div:not(.disable) .row > .p` ... https://codepen.io/anon/pen/WJXXzB?editors=1100 — Asons, May 07 '18 at 14:02
It does not work because of this example: div.disable div div.row div.p — miladfm, May 07 '18 at 14:05
Also this does not work because div.row div.p has potentially no parent at all. — miladfm, May 07 '18 at 14:06
@LGSon as you can see, you colored the first p red and i has a disable ancestor because the not condition apply to any element within the disable and p — Temani Afif, May 07 '18 at 14:08
well it was not the correct duplicate but it still impossible — Temani Afif, May 07 '18 at 14:11
Works like this though. https://codepen.io/anon/pen/PeOOOd. @TemaniAfif — deEr., May 07 '18 at 14:13
@AjAX. yes this is a trivial case as we deal with one level, so we won't have issue with sub levels — Temani Afif, May 07 '18 at 14:14
You are defining 2 different colours on the same elements, which means you will need 2 rules for them. There is no way to do it with one rule — Huangism, May 07 '18 at 14:14
@TemaniAfif No it doesnt. See: https://codepen.io/miladfm/pen/GdOOVz — miladfm, May 07 '18 at 14:16
it does with one level ;) and yes if you add more level it won't — Temani Afif, May 07 '18 at 14:17
@Huangism the second color was just example. What I want is no color at all if there is a disable somewhere as a parent. — miladfm, May 07 '18 at 14:17
@TemaniAfif The problem is in my code I could have any number of divs in between :( — miladfm, May 07 '18 at 14:18
yes I know, and my answer is clear: it's impossible :) I am simply relying to other trying to find a way ;) .. by the way I still believe in CSS magic, maybe it's possible but my mind still didn't find how — Temani Afif, May 07 '18 at 14:19
@miladfm By saying _"I could have any number of divs in between"_ makes it impossible to do using CSS. You will need a script. — Asons, May 07 '18 at 14:22
@miladfm I am _right_, today :), but when we can do `:has` it might be possible — Asons, May 07 '18 at 14:24

score 0 · Answer 1 · answered May 07 '18 at 15:24

Using CSS Custom Properties (aka CSS Variables) you can style an element according to some ancestor if you set a value to this ancestor and get its value on the former. It's inherited throughout the mighty cascade® and if not set, you can have a default value given by the fallback of var(--custom-prop, fallback)

Support is Edge 15+ or 16+ and other modern browsers for a longer time AFAIK

/* If any ascendant has a given class, no border */
.disable {
  --parent-disable-border: none;
}

/* Default border with fallback value of a CSS Variable / Custom Property */
.p {
  border: var(--parent-disable-border, 3px solid blue);
}

Codepen (sorry no snippet it currently fails in Firefox)

And we still have 2 selector to control, so I agree CSS variable are good but it doesn't solve the issue here — Temani Afif, May 07 '18 at 16:03
thats good but as @Temani Afif mentioned, we have still 2 selector — miladfm, May 08 '18 at 07:10

CSS selector :not(...) [parent has some class]

1 Answers1