Combining CSS properties

I am trying to combine some of my CSS and it is kind of an easy questions but I am kind of having some trouble, i have this code:

h2.post-title, h2.post-title a{
    display:block;
    background-color:#000;
    padding:3px;
    color:#ffffff;
    text-decoration:none;
    text-transform:uppercase;
    font:lighter 130% Georgia, Arial;
}

Do I need to have both of those selectors there? The only time I will be using the h2.post-title it will be a link. Any suggestions, I tried removing the first one, but it made it HUGE.

Thoughts?

Thanks,

Ryan

From stackoverflow

• If you remove the h2 font styling, it will revert to it's default font size which is pretty big. You could set it up separately:

  h2.post-title {
      font-size:130%;
  }
  

  But it will take up more space than simply setting both selectors to the same style. My advice - leave it as it is unless you have a good reason to change it.

  Coughlin : Thank you, i just wasnt sure if there was a more proper way to do so.

• The thing is that "h2.post-title a" only applyes to the <a>-element of your code. The browser uses standard css on the <h2>-tag!

  Lets have a look on your HTML:

  <h2 class="post-title"><a href="#">Clickable title</a></h2>
  

  You need rules to both the <h2> and the <a>-tag. To do that, you need do include both h2 and a in the stylesheet (as you described).

  A solution might be to remove the default styling of <h2>, by some of the many reset css-rules you'll find on the Internet.

  An other solution would be to move the class-spesification from "h2" over to "a" (and style just the "a.post-title" attribute in CSS):

  <h2><a class="post-title" href="#">Clickable title</a></h2>
  

  Or maybe you can remove the <h2>-tag completely, just print out <a>. But this might break your semantic.