css - divs all the same except single property

Question

Is there any kind of inheritance in css?

For example, divA, divB, divC all existing in the same spot with all the same properties, only differing by their z-index?

The idea being using jquery or whatnot to have different transitions between the sections.

Is anything like this possible or am I going about this the wrong way?

Answer 1

Is there any kind of inheritance in css?

Yes. Most properties can be given the value inherit which means "The same value for this property as the parent node has". This isn't the type of inheritance you are thinking of though.

For example, divA, divB, divC all existing in the same spot with all the same properties, only differing by their z-index?

CSS has no way to say that one rule-set should copy values from another one. You can do:

#divA, #divB, #divC  /* Or another selector that matches all the elements */
    { /* Common rules */ }
#divA { /* specific rules */ }
/* etc */

or various other strategies including generating your CSS using a script and using multiple classes on a single element.

Answer 2

You can specify multiple classes for a single element, eg

<div class="divA divB">

So with that you can do some clever trickery to get what you want.

Answer 3

CSS does have inheritance, that is one of the main principles of CSS.

jQuery can handle pretty much any scenario you want. If you provide a more detailed code writeup we can help more.

Answer 4

HTML:

<div id="container">
    <div id="divA">A</div>
    <div id="divB">B</div>
    <div id="divC">C</div>
</div>

CSS

#container div
{
    /*all your common styles here */
}
#divA { /*div specific style here */ }
#divB { /*div specific style here */ }
#divC { /*div specific style here */ }