CSS Different Class

Question

I need change a color for this element

<div class="box download">
    <div class="box-inner-block">
        <a href="" target="_blank" rel="noopener">Plugin Windows</a>
    </div>
</div>

I call a from CSS with:

.download.box-inner-block a {
    color: white!important;
}

But it does not work, why? I need this color only for the element in .box-inner-block inside .download.

Possible duplicate of [How to reference nested classes with css?](https://stackoverflow.com/questions/30505225/how-to-reference-nested-classes-with-css) — Suraj Rao, Dec 06 '17 at 10:23

chicken burger · Accepted Answer · 2017-12-06T11:16:51.100

0

Is this what you are looking for as understood in your question ?

If so you need to carefully watch how you indent and construct your css.

As you can see in my snippet I added a space between: .download .box-inner-block a in order to make that work.

You can also remove !important from you css as it will not be useful in that case. If you need it, don't forget to add a space bewtween white and !important

.download {
    background-color: black;
}

.download .box-inner-block a {
    color: white;
}

<div class="box download">
  <div class="box-inner-block">
    <a href="" target="_blank" rel="noopener">Plugin Windows</a>
  </div>
</div>

edited Dec 06 '17 at 11:16

answered Dec 06 '17 at 10:21

chicken burger

774
2
12
32

Thanks, just add need a space from two class =) – Marcus J.Kennedy Dec 06 '17 at 10:23
Glad it helped, just remember to accept my answer if you find this helpful for others to get help too. – chicken burger Dec 06 '17 at 10:24

score 0 · Answer 2 · answered Dec 06 '17 at 10:24

You are using the wrong selector, as .download.box-inner-block selects elements which has both download AND box-inner-block classes.

<div class="download box-inner-block"/>

To target nested elements, leave a space between the two class selectors. So the correct selector in your case is:

.download .box-inner-block a {
    color: white;
}

In this case you can drop !important too.

CSS Different Class

2 Answers2