/    Sign up×
Community /Pin to ProfileBookmark

CSS inheritance

Copy linkTweet thisAlerts:
May 12.2012

[CODE]#base
{
…
}
#sub
{
…
}[/CODE]

May #sub inherit #base – in some way similar to java or c++ class?
i.e.

[CODE]#sub extends #base
{
…
}[/CODE]

so that #sub inherits all properties of #base.

If yes, please show how to do.

Thanks.
.

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@Jeff_MottMay 12.2012 — There are two "sort-of" options. The simplest is to apply both CSS classes to the same HTML element.

<i>
</i>&lt;div class="base sub"&gt;&lt;/div&gt;


That DIV will get all the styles of base plus all the styles of sub.

Your other option is to use a CSS preprocessor, such as SASS or LESS. (My preference is SASS.) Your SASS-CSS could look like this:

<i>
</i>.base {
/* base styles */
}
.sub {
@extend .base;
/* sub styles */
}


And after processing, SASS will generate this CSS:

<i>
</i>.base, .sub {
/* base styles */
}
.sub {
/* sub styles */
}


So sub starts with all the same styles as base.
×

Success!

Help @html20009876 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...