Child style of css - html

Question

I need some 'derivative' css which is a child of my parent css. I want to import all of attributes of 'parent' css to my 'child' css.
I can't find a solution.
E.g.
.red {
color: red;
}
.more_red {
color: red;
border: 2 px solid red;
}
Is it possible to do something familar my pseudocode?
.red{
color: red;
}
.more_red <SOME TEXT WHICH SAYS 'THIS CSS IS A CHILD OF .red'>{
border: 2px solid red;
}
HTML
<p class='more_red'>texty text</p> <- this only I Need
<p class='red more_red'>texty text</p> <- not this
EDIT I need to create a css which consists of all of 'parent' css properties.

Answer 1

Only way to inherit/importing the styles defined in one rule to another in CSS is cascading. You cannot use extend as in LESS in CSS.
For inheriting the properties from other element, the parent-child hierarchy is necessary.
You can use direct child selector >
.red {
color: red;
}
.red > .more_red {
border: 2px solid red;
}
or descendant selector
.red .more_red {
border: 2px solid red;
}
By doing this, the styles of parent are inherited by children.
You can also use global selector *.
Ex. For setting the font-family across the site
* {
font-family: Helvetica;
}
You can also use element/type selector.
Ex. To set the style of all the anchors
a {
text-decoration: none;
color: #ccc;
}
a:hover {
text-decoration: underline;
}