How to Make an Element Inherit a Set of CSS Rules for Another Element

How to make an element inherit a set of CSS rules for another element?

The easiest is to add your someInheritedDiv element to the first rule like this.

div.someBaseDiv,
#someInheritedDiv
{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}

This will tell your #someInheritedDiv to apply the same styles as div.someBaseDiv has. Then you extend this set of styles with more specific to your #someInheritedDiv:

#someInheritedDiv
{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}

This is how specificity in CSS works.

How to set inherit specific css for element

If you dont define color for p and a,them get value her parent(blue) by default.so you must define color for it like: a {color:red} or use of CSS variables like this:

body {

color: red;

--color:red;

}

.div1 {

color:yellow;

}

.div2 {

color:blue;

}

.div2 a {

color: var(--color) !important;

}
<div class="div1">

<div class="div2">

<a>Test Test Test</a>

<p>bla bla bla<p>

</div>

</div>

Can a CSS class inherit one or more other classes?

There are tools like LESS, which allow you to compose CSS at a higher level of abstraction similar to what you describe.

Less calls these "Mixins"

Instead of

/* CSS */
#header {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

#footer {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

You could say

/* LESS */
.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

#header {
.rounded_corners;
}

#footer {
.rounded_corners;
}

How to set inherit specific css for element

If you dont define color for p and a,them get value her parent(blue) by default.so you must define color for it like: a {color:red} or use of CSS variables like this:

body {

color: red;

--color:red;

}

.div1 {

color:yellow;

}

.div2 {

color:blue;

}

.div2 a {

color: var(--color) !important;

}
<div class="div1">

<div class="div2">

<a>Test Test Test</a>

<p>bla bla bla<p>

</div>

</div>

How to have all elements inherit one particular property from base class?

General Answer

As stated in another answer, color inherits automatically (as this example shows), but that is assuming nothing else is setting color of the h2 elements (your .news-heading). If css sets the color of that element elsewhere, like this example, then you would need to override. Yes, you can override it as you are, making 20 different class calls to explicitly override (example) it per color, but it would be better to do that override in one single call like the following code, which then does not matter what the color is on body, as it will take that color as its own. Of course, it will only do so if your selector is high enough in specificity to win the selection battle.

.news-heading {color: inherit;}

Now while color (your particular case) usually inherits automatically, many properties do not, yet can still be set to inherit as a value. See the listing of what values are allowed and whether inheritance is the default or not. At present, I believe all properties can be explicitly set to inherit.

So the more general answer to your question is, for whatever "one particular property" you want to inherit from is, you can set it just like the above. So you could do something like this (theoretically):

.myClass {
background: inherit;
border-style: inherit;
border-color: inherit;
border-width: inherit;
float: inherit;
}

See example fiddle. Note that background: inherit is different than simply letting the background of the parent be seen through a transparent child (transparency is default; which some people may think is inheritance, but is not). In the example, you should be able to see a slight shift in background for the children that are inheriting it verses those that are not. This is because the background is actually repainting itself from (in this case) the top left corner of the child elements over the top of the parent background.

Note that inheritance is from the immediate parent. One cannot inherit from a grand-parent element without first setting the parent to inherit as well. See this example.

How to get the inherited values of element from JavaScript

You can simply implement a pixel-to-rem converter and use that:

function convertPixelsToRem(pixels) {
return ((pixels.replace("px", "") / getComputedStyle(document.documentElement).fontSize.replace("px", "")) + "rem");
}

console.log(convertPixelsToRem(window.getDefaultComputedStyle(document.getElementById("new").querySelector(".h1"))["font-size"]));
<style>
#new {
font-size: 2rem;
}
</style>
<div id="new">
<h1 class="h1">This is a heading</h1>
<!–– Here h1 is inheriting font-size from div ––>
</div>

inheriting from another css class

CSS classes cannot inherit so what you have to do is split them to be as much atomic as possible. For example if you have a rounded-corners class and it may be applicable to containers:

.rounded-corners
{
/* Your CSS to define rounded corners */
}

Note that you define ONLY the properties for rounded corners. Now let's say you have a class to style containers (for example with a proper padding):

.container
{
/* Your CSS to define a nice container */
}

How to combine them together? This won't be done in CSS but in HTML, in this example this <div> inherits from both container and rounded-corners:

<div class="container rounded-corners">
</div>

Now suppose you need rounded corners for a non container object:

<div class="rounded-corners">
</div>

This is how CSS works. Do not compare them (because of name) with classes of object oriented languages. Each class define a set of attributes that will be applied to all elements that belong to that class. Final element style is the composition of the attributes inherited from each class that element belongs to.

NOTE: to summarize: answer is yes, you may have to repeat some code. You'll have trouble to manage your code (both HTML and CSS) if you use classes as short names for a style: you'll see you missed the point to separate content from style (because in HTML you'll define, using a class like rounded-corners, an explicit appearance). Imagine: next month you have to change your web-site style and fashion requirements impose you have square corners. You have to change your HTML code (unless you accept to have a rounded-corners class to apply a squared border). Much better if you simply say container and you let your CSS to define (and know) how a container should be rendered.

It may be applicable to you or not (it depends on your preferences, taste and development environment) but you may take a look to LESS. It's implemented as a JavaScript that will parse your CSSs. Of course you won't write a pure valid CSS but you'll gain many new features. In your case you may find mixins are what you need:

.rounded-corners
{
/* Your CSS here */
}

.float-left
{
/* Your CSS here */
}

.container
{
.rounder-corners
.float-left
}

Specificity of inherited CSS properties

Any declaration that matches element directly will get priority over the property that's inherited from the element's parent. Specificity has nothing to do with that.



Related Topics



Leave a reply



Submit