CSS inheritence - Maybe Easy

[David Smithz]

Hi there,

I have my own CSS class, lets say example.

..example { color: red}.

And I want to define another class that has all the properties of the
example class but also has it's own additional properties (therefore say I
want class example 2 to inherit from example 1).

Is this possible and if so what is the syntax?

Thanks

 

[dorayme]

Hi there,

I have my own CSS class, lets say example.

.example { color: red}.

And I want to define another class that has all the properties of the
example class but also has it's own additional properties (therefore say I
want class example 2 to inherit from example 1).

Is this possible and if so what is the syntax?

Thanks

..example1 {color:red}
..example2 {font-size:500%;}

<p class="example1">This should be red and normal in size</p>
<p class="example2">This should be just enormous in size</p>
<p class="example1 example2">This should red and enormous in
size</p>

 

[dorayme]

<p class="example2">This should be just enormous in size</p>

just btw, in case someone tries to point out that something
cannot just be enormous in size without having some colour or
other, please don't be too sure! It might be true that there
can't be a cat's smile without any part of the cat's face in
spite of what Alice related, it is quite arguable about every bit
of text having a colour. There may be no sense in the idea if the
text is very very big or very very small. Am talking here more
than galaxy scale or less than nano.

(Hey Mr. Pugh... ask me what I am on this morning... hint: just
one cup of tea)

 

[David Smithz]

.example1 {color:red}
.example2 {font-size:500%;}

<p class="example1">This should be red and normal in size</p>
<p class="example2">This should be just enormous in size</p>
<p class="example1 example2">This should red and enormous in
size</p>

Hmmm, OK, I guess that's the way to do it then. I was kind of hoping there
was a way to do it so that within the HTML code one only had to define a
single class, so using your example
<p class="example1 example2">This should red and enormous in size</p>
would become:
<p class="example2">This should red and enormous in size</p>

but in the style sheet itself we define that example2 always inherits
example1 (so therefore we don't have to list two or more styles within an
element).

I thought there would have been a way to do this but I'm sure there is a
logical reason as to why not.

Thanks for the advice.

 

[Mark Parnell]

Deciding to do something for the good of humanity, David Smithz

.example { color: red}.

And I want to define another class that has all the properties of the
example class but also has it's own additional properties (therefore say I
want class example 2 to inherit from example 1).

..example, .example2 {color: red;}

..example2 {/*additional styles*/}

 

[Joe]

Hmmm, OK, I guess that's the way to do it then. I was kind of hoping there
was a way to do it so that within the HTML code one only had to define a
single class, so using your example
<p class="example1 example2">This should red and enormous in size</p>
would become:
<p class="example2">This should red and enormous in size</p>

but in the style sheet itself we define that example2 always inherits
example1 (so therefore we don't have to list two or more styles within an
element).

I thought there would have been a way to do this but I'm sure there is a
logical reason as to why not.

Thanks for the advice.

.example1, example2 {color:red;}
..example2 {font-size:500%;}

<p class="example1">This is red text</p>
<p class="example2">This is enormous red text</p>