Home CSS Different Class
Reply: 2

CSS Different Class

Marcus J.Kennedy
1#
Marcus J.Kennedy Published in 2017-12-06 10:17:05Z

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.

chicken burger
2#
chicken burger Reply to 2017-12-06 11:16:51Z

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>

dferenc
3#
dferenc Reply to 2017-12-06 10:24:29Z

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.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.324831 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO