CODEWITHSUNDEEP
css
Dzhuneyt
Dzhuneyt

Reputation: 8701

Import CSS Selector Styles in Another Selector? (NOT @import)

Is there a way to import the styling of a single CSS selector into another CSS selector and add to it or rewrite properties from it.

Let's say:

.original_class{
background:black;
color:white;
}
.overwrite{
@import(.original_class); /* I know this doesn't work */
color:blue;
border:1px solid green;
}

I can accomplish this by just redeclaring the .original_class and assigning new values (since CSS styles are rewritten from top to bottom), but this will replace the attributes of the original CSS class. What I want is to inherit its properties into another class without having to write them again (duplicate).

Upvotes: 6

Views: 8485

Answers (3)

FelipeAls
FelipeAls

Reputation: 22171

You can add the .overwrite selector to the first rule by separating it from the existing selector with a comma (grouping selectors), so the selector rule becomes .original_class, .overwrite:

.original_class,
.overwrite {
background: black;
color: white;
}
.overwrite {
color: blue;
border: 1px solid green;
}

Also, when you write:

this will replace the attributes of the original CSS class

there is no such thing as attributes and class in CSS, not with the intended meaning of OOP I guess. There are rules, selector rules (to select HTML id, classes, elements, attributes and other pseudos), declarations, properties and values.

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324790

Unfortunately not. At least not without one of those fancy CSS plugin thingies that I wouldn't touch with a mile-long pole...

Of course, there's nothing stopping you having multiple classes on a single element.

Upvotes: 0

Jan Hančič
Jan Hančič

Reputation: 53929

Not directly, no.

You could do something like this in your HTML:

<div class="original_class overwrite">...</div>

This will have the same effect, but you will have to do this for every element you want styled that way.

There is also the option of using a CSS pre-processor, like SASS, which supports inheritance/mixins.

Upvotes: 2

Related Questions