CODEWITHSUNDEEP
csssass
aaaaaaaaax10
aaaaaaaaax10

Reputation: 629

Apply a style on element A if element B contains a certain class

Is it possible to check the class of an element, see if it exists, and then apply the style for another class?

Example pseudo code:

if (.myClass .myBlock == true) { 
  .otherClass { 
    display:none 
  }
}

Upvotes: 0

Views: 133

Answers (1)

roberrrt-s
roberrrt-s

Reputation: 8210

It's not possible in this context. But you can achieve a similar result with the cascading nature of CSS.

Apply a class to the body of your website:

.another-class {
    display: none; // hides .another-class by default
}

body.special-class {
    .another-class {
        display: block; // shows if the body contains .special-class
    }
}

Since the specificity of the generated output is higher at the second rule, the elements with .another-class will be visible.

Give the following row a class

Utilising the + selector enables us to display the row after the mentioned class. This way we can style dropdowns popups, given we have the following HTML:

.popup {
  display: none;
}

.popup:hover {
  display: block;
}

.container:hover + .popup {
  display: block;
}
<div class="container">Hover me!</div>
<div class="popup">This is a popup!</div>

I'm afraid that's all that is possible with CSS.

Upvotes: 1

Related Questions