CSS selectors that is not applied if hierarchy contains an element?

Question

There are tens of CSS rules I would like to be applied on a section of a page - this part is easy:

.generalStyles a,p,button,div.foo {
  /* many styling rules here*/
}

However, when I mark a section of a page with class="generalStyles", I would like certain subsections not to inherit those styles, such as descendants of class="noGeneralStyles" (1). This should work with arbitrary nesting.

What I am looking for is a selector that could be translated into:

Inherit CSS rules if you are a descendant of .generalStyles, but not when .noGeneralStyles is a closer parent

An interactive jsFiddle example can be found here

EDIT: The solution (if there is any) should not make any assumptions of inner HTML

(1) - the reason is there are way too many CSS rules to reset

score 3 · Answer 1 · edited May 23 '17 at 12:11

3

You won't be able to limit or otherwise control inheritance chains using selectors alone, not even through combining :not() and descendant selectors for the reasons given here and here. You will have to provide an overriding rule for elements within .generalStyles .noGeneralStyles.

edited May 23 '17 at 12:11

Community

1
1

answered Sep 05 '13 at 06:58

BoltClock

700,868
160
1,392
1,356

This is prone to "infinite loops" - is another set of rules needed for `.generalStyles .noGeneralStyles .generalStyles`? I fear that your answer might be correct, though, and CSS is not yet ready for "widget" type development – Maros Urbanec Sep 05 '13 at 07:03
1

@user2394179: Yes, unfortunately. There's no way of specifying the closer of two ancestors to a particular descendant - that's just not how selectors work. A future spec will allow you to block inheritance for specific or (almost) all properties using property syntax - see [here](http://dev.w3.org/csswg/css-cascade/#defaulting) - but it'll be a long time before implementations arrive. – BoltClock Sep 05 '13 at 07:04
Just curious, how he nested the styles in his fiddle? Edit: I see now, SCSS hehe, I was expecting that in External Resources – Mr. Alien Sep 05 '13 at 08:08

score 2 · Answer 2 · answered Sep 05 '13 at 06:17

2

How about using direct descendant selectors? > means it will select button tag, which is direct child to an element having class noGeneralStyles or generalStyles

Demo

.noGeneralStyles > button {
    color: black;
}
.generalStyles > button {
    color: red;
}

answered Sep 05 '13 at 06:17

Mr. Alien

153,751
34
298
278

Unfortunately - no. Firstly, they can be arbitrarily nested and secondly, such approach is in fact a CSS reset - which I would like to avoid (too many rules to be reset). – Maros Urbanec Sep 05 '13 at 06:39
@user2394179 I didn't got what you are trying to achieve here, I went according to the text written in your buttons – Mr. Alien Sep 05 '13 at 06:41
1

This answer would be my guess too. @user2394179, maybe you could add a code to your startpost which clarifies which elements you DO and DO NOT want to style. – GreyRoofPigeon Sep 05 '13 at 08:00
@user2394179 as Bolt already explained you, you cannot simply reset the style using ANY selector whatsoever, you need to override them. – Mr. Alien Sep 05 '13 at 08:01

CSS selectors that is not applied if hierarchy contains an element?

2 Answers2