CODEWITHSUNDEEP
css
Eduardo Ponce de Leon
Eduardo Ponce de Leon

Reputation: 9696

Assign Styles to a selector from another selector CSS

Is there a way to have a class or any selector with specific styles, and then share, import or assign those styles to a another selector. This is to avid creating multiple classes and not having to go back to the HTML code all the time to assign such classes.

For example:

.orangeText{
 color:orange
}

.strongtext{
 font-weight:900
}

a regular scenario would use those clases like this:

<div class="orangeText strongtext">My orange Strong Text</div>

I am looking for something like this:

.orangeText{
 color:orange
}

.strongtext{
 font-weight:900
}

.orangeStrongTitle{
  @.orangeText; /* Import styles from .orangeText*/
  @.strongtext; /* Import styles from .strongtext*/
  text-decoration:underline;
}

ON HTML:

<div class="orangeStrongTitle">My orange Strong Text</div>

PLEASE NOTE THAT @.orangeText IS MY INVENTION TO GIVE AN EXAMPLE OF WHAT I WANT, I DON'T KNOW IF SUCH THING EXISTS, I WAS INSPIRED ON @import

Is this possible?

Upvotes: 1

Views: 2844

Answers (1)

Thomas
Thomas

Reputation: 118

With traditional CSS it seem's that you can't.

See this topic : Is it possible to combine classes in CSS?

Unless you use LESS or SASS's 'mixin' features, there's no real way in plain CSS to "inherit" other classes. The best you can do is apply all three classes to your DOM element. If your problem is that you have a ton of those classes already on a page and you want to add properties to all of them, you can do:

.foo, .bar, .foobar {
    color: red;
}

and that will apply color: red to any element that has .foo or .bar or .foobar.

EDIT

Since you're asking for an exemple, here is how the mixin feature of SASS works :

@mixin mixin-name {
  margin: 0;
  padding: 0;
}

ul {
  @include mixin-name;
}

Having this will compile into this :

ul {
  margin: 0;
  padding: 0;
}

Upvotes: 5

Related Questions