Repurposing CSS Class Selectors

Posted by limefartlek on Pro Webmasters See other posts from Pro Webmasters or by limefartlek
Published on 2012-09-21T14:16:28Z Indexed on 2012/09/21 15:54 UTC
Read the original article Hit count: 130

Filed under:

I don't know what this technique is called, I've only seen it used. It's a way to repurpose the same selectors with CSS.

For example if I create

 h1  { 
      font-size:18px; 
      color:#FFFFFF; 
      font-family:Arial, Helvetica;margin:0;
      padding:0;
}

h2  { 
          font-size:18px; color:#000000; 
          font-family:Arial, Helvetica; 
          font-weight:normal;margin:0;
          padding:0;
}

I can repurpose the h selectors with something like

.whatever h1 {
    color: #000; 
    font: 2.0em arial, sans-serif; 
    background-color: #fff3ea; 
    margin: 50px 0px 0px 50px; 
}

.whatever h2 {
    color: #000; 
    font: 1.7em bold arial, sans-serif; 
    background-color: #fff3ea; 
    margin: 25px 0px 25px 75px;
}

If h1 and h2 appear inside of a div called whatever, then they will assume those properties. You can do this with ID tags and class tags but I can't for the life of me remember how this is done.

Any thoughts?

© Pro Webmasters or respective owner

Related posts about css