CSS class reuse / auto populate

Question

Hi,

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

Answer 1

Yes, you can target the spans with

#someDiv span {
   //
}

Answer 2

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.

Answer 3

There's no way to apply ids and classes from parent elements to child elements, which is what I think you're asking about. There's also no reason to need to.

HTML:

<div id="divid" class="divclass">
    <span class="otherclass"> ... </span>
    <span class="otherclass"> ... </span>
    <span> ... </span>
    <span> ... </span>
    <a href="#" class="otherclass"> ... </a>
</div>

If you want to target all elements in this specific div:

#divid * {
    ...
}

If you want to target all spans in this specific div:

#divid span {
    ...
}

If you want to target all elements in this specific div with a class of otherclass:

#divid .otherclass {
    ...
}

If you want to target only spans in this specific div with a class of otherclass:

#divid span.otherclass {
    ...
}

If you want to target all divs with divclass (instead of just the one with divid), simply replace #divid with .divclass in all of the above.