CODEWITHSUNDEEP
htmlcss
Vyacheslav
Vyacheslav

Reputation: 27221

Child style of css

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.

Upvotes: 2

Views: 154

Answers (1)

Tushar
Tushar

Reputation: 87203

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;
}

Upvotes: 6

Related Questions