Search code examples
cssstylesheet

CSS class reuse / auto populate

say I have a css class name

div.TestClass
{
     float:left;etc//
}

span.SpanTestClass
{
     float:right;etc//
}

on my form, I have got many spans and divs.

is there an easy way to implement all the classes for my spans and divs instead of typing them all out when I create a new span or div? instead of this:

<span id=span1 class=SpanTestClass></span>
<span id=span2 class=SpanTestClass></span>
<span id=span3 class=SpanTestClass></span>
<span id=span4 class=SpanTestClass></span>

like so:

<div id="someDiv" class="someclass">
<span id=span1></span>
<span id=span2></span>
<span id=span3></span>
<span id=span4></span>
</div>

Cheers

Solution

  • CSS

    .someDiv{
color:#353535;
}

.someDiv span{
font-weight:bold;
color:red;
}

    HTML

    <div class="someDiv">

Hello <span>World!</span>

</div>

    Any span tag inside a div using 'someDiv' as it's class will have red + bold text.