CODEWITHSUNDEEP
htmlcss
user1928108
user1928108

Reputation: 101

Make a parent div independent of parent divs with CSS

.cat_p{
    float:left; 
    margin-right:3px; 
    margin-bottom: 1px;}
.cat_p a {
    background: #00A1E0;
    color: #FFFFFF;
    display: inline-block;
    margin-bottom: 2px;
    margin-left: 0px;
    padding: 1px 7px;
    text-decoration: none;
    transition: all 0.3s ease 0s;
} 
.cat_p a:hover{
    background:  #666; 
    color:#fff;
}

This is the code I use to display categories and tags for a post for articles on Wordpress. This works perfectly well on the homepage while on another page(single.php), the code doesn't work properly because the links appear blue in colour which makes it impossible to differentiate category div's background and text. I checked the code above but can't find any problems. I'd like to know if there's a way I could make the category div independent of the divs above since they might have a problem.

Upvotes: 2

Views: 1187

Answers (1)

Teknotica
Teknotica

Reputation: 1136

If the CSS is not working in other pages but the homepage means that other piece of CSS is overriding it. Try and look for a specific "id" or "class" of that page to apply that CSS. Normally I would go for a class in the body, then do:

.home,
.single-post {

    .cat_p{
        float:left; 
        margin-right:3px; 
        margin-bottom: 1px;}
    .cat_p a {
        background: #00A1E0;
        color: #FFFFFF;
        display: inline-block;
        margin-bottom: 2px;
        margin-left: 0px;
        padding: 1px 7px;
        text-decoration: none;
        transition: all 0.3s ease 0s;
    } 
    .cat_p a:hover{
        background:  #666; 
        color:#fff;
    }    
}

Upvotes: 1

Related Questions