CODEWITHSUNDEEP
htmlcss
Alexander Dimitrov
Alexander Dimitrov

Reputation: 121

CSS Styling mistake?

I have a little problem styling my links.

There is a div with an id kofa which contains basically everything.

There is a div with class post-date in which there's a link (a).

All the links in kofa work as they should, but the link in post-date just seems to take the styling of kofa's links and not the style specified in the file:

#kofa a, #kofa a:visited {
    margin: 0;
    padding: 0;
    color: #a00000;
    text-decoration: none;
}

#kofa a:hover {
    margin: 0;
    padding: 0;
    color: #bb0000;
}

.post-date a, .post-date a:visited {
    padding-left: 50px;
    font-family: planewalker;
    color: #eee;
    font-size: 14px;
}

Upvotes: 0

Views: 68

Answers (4)

Edward Manda
Edward Manda

Reputation: 579

id is worth 10 points and class is worth 1point. To determine who wins, the points add up. So to make sure that the class wins, just put the id declaration in front of it.

#kofa a, #kofa a:visited {
    margin: 0;
    padding: 0;
    color: #a00000;
    text-decoration: none;
}

#kofa a:hover {
    margin: 0;
    padding: 0;
    color: #bb0000;
}

#kofa .post-date a, #kofa .post-date a:visited {
    padding-left: 50px;
    font-family: planewalker;
    color: #eee;
    font-size: 14px;
}

Upvotes: 0

adricadar
adricadar

Reputation: 10209

Your need to add #kofa before .post-date (see snippet below), it's important how the inheritance is used to override styles.

Note: Avoid !important when possible.

#kofa a, #kofa a:visited {
    margin: 0;
    padding: 0;
    color: #a00000;
    text-decoration: none;
}

#kofa a:hover {
    margin: 0;
    padding: 0;
    color: #bb0000;
}

#kofa .post-date a, 
#kofa .post-date a:visited {
    padding-left: 50px;
    font-family: planewalker;
    color: #666;
    font-size: 14px;
}
<div id="kofa">
  <a> Kofa link </a>
  
  <div class="post-date">
    <a> post link </a>
  </div>

  <a class="post-date">
    wrong way
  </a>
</div>

If you want to use that styles to be applied to a that contains the class post-date

<a class="post-date">
    on tag
</a>


#kofa a, #kofa a:visited {
    margin: 0;
    padding: 0;
    color: #a00000;
    text-decoration: none;
}

#kofa a:hover {
    margin: 0;
    padding: 0;
    color: #bb0000;
}

#kofa a.post-date, 
#kofa a.post-date:visited {
    padding-left: 50px;
    font-family: planewalker;
    color: #666;
    font-size: 14px;
}
<div id="kofa">
  <a> Kofa link </a>
  
  <a class="post-date">
    applied on a class
  </a>
</div>

Upvotes: 3

user3560517
user3560517

Reputation:

I don't know your HTML structure. But hope this code help you . 

 .first a:visited {
    margin: 0;
    padding: 0;
    color: #a00000;
    text-decoration: none;
}

.first a:hover {
    margin: 0;
    padding: 0;
    color: #bb0000;
}

.post-date a, .post-date a:visited {
    padding-left: 50px;
    font-family: planewalker;
    color: #eee;
    font-size: 14px;
}
  <div id="kofa">
     <div class="first">
      <a href="">Hello</a>
    </div>
    <div class="post-date">
      <a href="">Post date</a>
    </div>
  </div>

Upvotes: 0

Nilse
Nilse

Reputation: 140

This is because kofa is assigned as ID, and post-date is "only" an class. To avoid this, you should either set an !important behind every css declaration in .post-date OR define inline-style OR define .post-date also as an ID.

.post-date a, .post-date a:visited {
  padding-left: 50px!important;
  font-family: planewalker!important;
  color: #eee!important;
  font-size: 14px!important;
}

Upvotes: 1

Related Questions