Apply/remove CSS class if parent has specific class

Question

Is it possible in CSS 3 to apply/remove a certain css class (not property/value) to an element based on it's parent class?

I'll give a concrete example to try and better explain my meaning - say I have a <div> which depending on circumstances I may apply the style-class my-large-div or my-small-div. Inside it, I some inputs/buttons with the Bootstrap class form-group and form-group-lg:

<div class="my-large-div">
    ...
    <div class="my-form-group form-group form-group-lg">
        <!-- some input field -->
    </div>
</div>

Now, what I want to happen is that when my-large-div is applied, the inner div will have form-group-lg, but when my-small-div is applied, it will not. I conceptually think of a CSS like this:

.my-large-div .my-form-group {
    add-class("form-group-lg");
}

.my-small-div .my-form-group {
    remove-class("form-group-lg");
}

Now, I know this can be achieved using Javascript/jQuery, but I'm looking for a CSS-only solution, if such a solution exists, or a definitive answer that it can't be done.

One possible solution would be to always have two copies of my-form-group, with display set to either none or initial, but I feel this may be messy as well as inefficient (If, say, I change the class in response to user's actions in the page).

One thing I certainly don't want to do is to replicate the entire definition of form-group and form-group-lg in my own CSS, as that would mean with every change of the Bootstrap classes I will have to change mine (plus it breaks the abstraction).

What is a "css class"? If you're not talking about CSS properties, what are you trying to "remove" from an element? — BoltClock, Jul 14 '16 at 04:21
Use jQuery, here is an example of adding a class onload. http://stackoverflow.com/questions/4995440/add-class-to-object-on-page-load — Joseph Charnin, Jul 14 '16 at 04:22
@BoltClock - I want to use the abstraction the class gives me. The same way I can say "This element should be styled according to this class", thus abstracting away the actual details of the styling to the class, I want to be able to control this entire class structure (whether it's applied or not) according to an element's parent class. Instead of doing `.a .b { /* lot's of properties*/}` I was hoping to do `.a .b { /* now use everything .c calls for */ )` — Itai, Jul 14 '16 at 04:25
@sillyfly: In that case, I think you're simply trying to add or remove the form-group-lg class name from a .form-group element. [This answer](http://stackoverflow.com/questions/18701670/can-i-use-non-existing-css-classes/18701712#18701712) explains how classes work. This is not something you can do with CSS, since CSS cannot modify HTML attributes/DOM properties; CSS can only style elements based on document information that is available to it. (I can post this as an answer if you like.) — BoltClock, Jul 14 '16 at 04:31

score 1 · Answer 1 · answered Jul 14 '16 at 04:25

1

Yeah by using the :not() selector you can do something like

.form-group-lg {
    display: none;
}

.my-form-group:not(.my-small-div) .form-group-lg {
    display: block;
}

What this does is check if the div with the class my-form-group also has a class my-small-div, if it doesn't, form-group-lg will be displayed as a block, else it will just be display: none;

answered Jul 14 '16 at 04:25

Sam Chahine

530
1
17
52

I don't want to hide the content, just remove the styling that `form-group-lg` entails. It should still be displayed using anything other classes call for. – Itai Jul 14 '16 at 04:30
In this case wouldn't it be best to have to separate classes to use? Hiding when and showing the other at any time depending on the parent? @sillyfly – Sam Chahine Jul 14 '16 at 04:34

score 0 · Answer 2 · answered Jul 14 '16 at 04:32

There is no way to conditionally asign or remove classes in CSS. Although as you may know, this can be easily accomplished in Javascript.

e.g. 
if( $(‘#target’).hasClass(‘animal’) ) {
$(document.body).addClass(‘dog’);
}

You can conditionally alter the style of particular classes depending on the parent element however, using the :not() selector, as per Samir's example.

score -1 · Answer 3 · answered Jul 14 '16 at 04:18

-1

Nope. CSS can't remove elements from the DOM, only Javascript can access the DOM.

answered Jul 14 '16 at 04:18

Jefsama

553
9
29

I don't want it to remove the _element_, just modify it's class. I suspect this as well is impossible, but it's not the same thing. – Itai Jul 14 '16 at 04:22

Apply/remove CSS class if parent has specific class

3 Answers3