Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Selectors inheritance

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #149835
    Anonymous
    Inactive

    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 ;]

    #149840
    Paulie_D
    Member

    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).

    #149841
    Anonymous
    Inactive

    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 ;]

    #149846
    Paulie_D
    Member

    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.

    #149853
    Paulie_D
    Member

    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

    #150188
    Anonymous
    Inactive

    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 ;]

    #150192
    Paulie_D
    Member

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.