[Solved] Selectors inheritance

[Anonymous]

Hi guys! Have a one simple problem with inheritance in CSS. Let’s say I have a generic button styling class (I’m using it with button, anchor and input(submit) tags), so I have:

.button { background: red color: #fff; }

Now I’m using this class across whole website and it’s perfectly fine. But I have “custom-footer” section, which has some text and links as well. This section has white background so I want to set all links (but not elements with class .button) to be red. So I’m using following css:

.custom-footer a { color: red; }

And now this style is involving also my buttons. How can I leave buttons with their generic styles. I don’t want to use any !important’s and also don’t wanna use :not selector, as I would have to add it wherever I would set some styling for another section. Any ideas?

Thank you in advance ;]

[Paulie_D]

Have you tried

.custom-footer .button {
color: ######;
}

I do think we need to see some actual code because you seem to be using a and .button as though they were interchangeable and it’s getting confusing (at least to me).

[Anonymous]

Yea, I know that code you suggested will works, but then I would need to add this kind of a code to all sections. I want to just have all the styles in .button definition. Here’s the code of my button class:

    .button {
    background: $cyan;
    border-radius: $border-radius;
    color: $white;
    display: inline-block;
    font-weight: $bold;
    padding: 13px 16px;
    text-transform: uppercase;

    @include single-box-shadow($dark-cyan, 0, 3px, 0, 0);

    &:hover {
        background: $red;
        color: $white;
        @include single-box-shadow($dark-red, 0, 3px, 0, 0);
    }

}

And as I said before I set “.custom-footer a” color to red. Now I’m using my button that way:

<footer class="custom-footer"><div class="content"><a class="button">Read more</a></div></footer>

I’m wondering if there any elegant way to make .button class generic without any hacks.

Regards ;]

[Paulie_D]

Not really as far as I can tell.

You’ve set it up that your a links, buttons, inputs and .button will have a color of white.

If you need to change that for a specific section then you need specific CSS.

[Paulie_D]

I have a slight idea….instead of styling links to look like buttons, why not put the links inside an actual button?

Then you can do

.custom-footer > a { color:red; }

and it won’t affect the button links (I think)

You just have to separate the anchor link basic colors styling from the button.

http://codepen.io/Paulie-D/pen/LIalk

[Anonymous]

Thanks Paulie_D, I think this is nice idea. I will think about it.

Btw. Could you tell me how to mark topic as solved. Not sure where I can make it ;]

Regards ;]

[Paulie_D]

You can’t (yet)…but as Mod I can (sort of).

[Author]

Posts