Import CSS Selector Styles in Another Selector? (Not @Import)

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

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.

CSS: import/copy style from another selector

There is no way to do it in pure css, only with css pre-processors like sass/less etc.

There are 2 ways you can go about it:

1. If you can control the generated html, add your class to the element: <div class="ICannotChangeThatClass MyAwesomeClass ">Awesome markup</div>

2. In your css, define a class with the same name as the one you want to override and add the new styling:

   .ICannotChangeThatClass {
       //MyAwsomeClass code goes here
    }
   

Assign Styles to a selector from another selector CSS

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

overriding css styles with @import not working

That isn't working because any import rule declared inside of a stylesheet must come before everything else - otherwise, ...well, it doesn't work ;) .

So, what you should have in your style.css stylesheet is:

@import url('style-override.css');  
body {color: red;}

CSS @import inside a class

You cannot @import inside a CSS rule. @import statements must be declared outside any selectors.

From the MDN page on @import:

The @import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, it cannot be used inside conditional group at-rules.

Such functionality would require nested selectors, which do not exist in CSS. You you have to write such a thing in LESS or SASS, and preprocess it into CSS.

Your linked question suggests creating a LESS file that import Bootstrap's LESS code, and then compile that to CSS.

Is it possible to include one CSS file in another?

Yes:

@import url("base.css");

Note:

• The @import rule must precede all other rules (except @charset).
• Additional @import statements require additional server requests. As an alternative, concatenate all CSS into one file to avoid multiple HTTP requests. For example, copy the contents of base.css and special.css into base-special.css and reference only base-special.css.

How to exclude style element when it's imported from another css file

You can give:

#componentContainer {
    background-color: #fff;
}

in your external CSS file to change the colour.

If it does not work use !important [it will force the style to be over-right by your custom style.], you can use this style:

#componentContainer {
    background-color: #fff !important;
}

I hope the above code will solve your issue.

Importing CSS in one component is adding CSS affect to other Components. How and Why?

In React, like someone already had commented, you need the CSS modules to handle your problem. Actually, it's already included in the css-loader, which is a very basic module you need for webpack to handle the CSS files in the bundling process. I am not sure if you build your React app from the ground up, but I am quite sure you already had this module in your project.

{
  loader: 'css-loader',
    ...
  options: {           
  // Automatically enable css modules for files satisfying `/\.module\.\w+$/i` RegExp.
    modules: { auto: true },
  },
},

I believe you are an experienced web app programmer, and just complaining about the design of the React, but I would like to provide a little basic knowledge of browser rendering mechanism here for whom just start learning web programming and thinking about the same question.

The basic of the rendering engine in the browser is interpreting the HTML, XML documents. After loading assets by such as <script>, <style>. There are a couple of steps to complete the rendering. The step to apply CSS rules on pixels is Style calculations.

What browser does is very simple, it takes the CSS files, applies the rules, something about the scope of the styles really rely on the practice of library/framework, you can imagine that the best they can do is preprocessing the CSS files and add some unique properties to each CSS rules corresponding to the specific class names it can find in your code.

Where to import the CSS file is just for readability and maintainability. In the old times, when people still program web app with jQuery or pure JS, you just include the CSS file in the .html file, maybe it forces you to care about the naming of the classes and styles earlier, but actually we also have the same problems when you try to separate it for bigger projects.

---

Related Topics