How to add style the elements in a div when the div doesnt have some class using css?

Question

i want to add some style to the div elements when the div is not of some class

What i am trying to do? i have a div with class "card". i have other elements in the div like footer, a tag and h4. now i want to make the a, h4 tag to blue color on cursor hover.

so i do it like below,

.card a h4:hover {
    color: blue;
}

But i want to add this style to those a and h4 elements when div has only card class. i dont color blue for a, h4 elements when div has "card" and "disabled" classes. how can i do it.

below is the html code,

<div class="card">
    <div class="footer">
        <div class="info">
            <a href="somelink">
                <h4>text</h4>
            </a>
        </div>   
    </div>
</div>

Could someone help me with this. thanks.

score 1 · Answer 1 · answered Jan 20 '20 at 13:43

Hope you are looking for a solution like this. Adding style to h4 tag on hover under class card and not adding any specific style for div with both card and disabled class

.card a h4:hover {
    color: orange;
}
.card.disabled a h4:hover {
    color: inherit;
}

<div class="card">
  <div class="footer">
      <div class="info">
          <a href="">
              <h4>Card</h4>
          </a>
      </div>   
  </div>
</div>

<div class="card disabled">
  <div class="footer">
      <div class="info">
          <a href="">
              <h4>Card Disabled</h4>
          </a>
      </div>   
  </div>
</div>

score 0 · Accepted Answer · answered Jan 20 '20 at 13:46

0

You can use the :not selector:

.card:not(.disabled) a h4 { ... }

answered Jan 20 '20 at 13:46

isherwood

58,414
16
114
157

How to add style the elements in a div when the div doesnt have some class using css?

2 Answers2