Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    116
    Thanks
    29
    Thanked 1 Time in 1 Post

    [CSS] Adapt a generic style for a particular case.

    You may have found the title a little confusing. But what i wanted to know if it is possible to somehow adapt some css classes (with a generic styling) to modify just some piece of that css and adapt it to a specific div, element, whatever.
    For example

    .GenericLink{
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    }

    .GenericLink:hover{
    text-decoration: underline;
    }



    And I want to have a link with same css of GenericLink, but margin-top: 10px for example....
    Do i have to create a whole new class? or can i just adapt the current class for this particular case.

    .CustomLink{
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    margin-top: 10px;
    }

    .CustomLink:hover{
    text-decoration: underline;
    }


    Thanks in advance.
    Last edited by hernantz; 08-28-2010 at 07:02 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    You don’t have to copy all the styles again if you just want to add another style. You can just apply another class to the element like <a class="GenericLink CustomLink" … and then have a separate rule with just that one additional style in your stylesheet, e. g. either .CustomLink {margin-top: 10px;} or more specifically, if you only want to address links that have both classes .GenericLink.CustomLink {margin-top: 10px;} (note the missing space between the class selectors, that’s deliberate.).
    Last edited by VIPStephan; 08-26-2010 at 11:03 PM.

  • Users who have thanked VIPStephan for this post:

    hernantz (08-28-2010)

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    116
    Thanks
    29
    Thanked 1 Time in 1 Post
    ok, made a test and worked this way.

    Code:
    <a class="GenericLink CustomLink" href="#">Hello world</a>
    Code:
    .GenericLink{
    color: #000;
    font-weight: bold;
    text-decoration: none;
    }
    
    .GenericLink:hover{
    text-decoration: underline;
    }
    
    .CustomLink{
    float: right;
    margin-top: 30px;
    }
    Now im going to try it with my site, the thing is that its a menu in this case and I have the #MainMenu id and the .GenericListing class, so i will add an id="MainMenu" class="GenericListing", and be right back.

    Does #id rule over .class?
    Last edited by hernantz; 08-28-2010 at 06:45 PM.

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Posts
    116
    Thanks
    29
    Thanked 1 Time in 1 Post
    Ok got it working with less css code

    Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •