I mean, if I have a class .parent {/*something*/} and also class .child {/*something*/}, have I an ability to declare inheritance of .child from .parent?
Actually I never heard about something like that. But any way, I am not expert in CSS.
Itās a value you can give a number of CSS properties, Iāll point you to Mozilla Dev for a brief explanation:
No, that is absolutelly not what I mean. I mean styles inheritance, not included elements.
Not sure what the question really is, hopefully this could be closer:
I have element <p class="parent">. And I could to have also element <p class="parent child">. In this case my element inherits all style properties from .parent and extends it with .child. But I would to have <p class="child"> and declare inheritance of .child from .parent in CSS-file.
Is that possible at all?
If it was possible to declare inheritance for elements or classes outside the grand-parent/parent - child relation, it would be news to me. (If I finally understand you correctly.)
I think you need to use Javascript to work around the style parsing.
If you install the less preprocessor it could be done at the coding stage which then is compiled to standard css where the āinheritanceā is just duplicated properties and values in the āinheritingā classes.
Check out the use of its Mixins feature:
Thanks. But practically that is also modifying with Java Script. So, you mean pure CSS canāt directly inherit?
Right, CSS elements canāt influence each otherās properties cross elements, so to speak.
Itās called Cascading Style Sheets for a reason. 
Still not sure what youāre after, I should mention there is also ācss variablesā you could explore the use of:
Thanks again. Very interesting information.
1 Like
CSS is all about inheritance, itās what āCascadingā is.
But inheritace goes only from parent/ancestor to child. It is not passed between siblings or unrelated elements.
Maybe if you explain specifically what you want to to achieve, with working examples of html and styles, there will be a way.
3 Likes
And to clarify - itās all driven by the elementās inheritance/specificity. css rules have nothing to do with each other.
They all act individually against the elements in the page. Which rules get applied depend on the specificity of the rule (the more specific, the more likely it is to get applied) and the order itās placed in the style sheet (for two rules with the same specificity, the one that appears last will get precedence)
2 Likes
Exactly that Iāve mean. If to take CSS-styles as kind of objects, could this objects to inherit each other? It seems notā¦
No because in programming parlance, css rules are more like properties, not objects. The html elements are the objects.
1 Like
Am a little late here. But perhaps it may make it easier to understand if you thought about it differently.
CSS a class is not the same as a programatical āclassā and more of a level of specificity. from lowest to highest:
* (no specific)
TAG ( specific to that particular TAG)
. ( a class, specific to ANY element with that tag)
# (an id, theoretically each id should only be used once per document, and thusly is the most specific)
Nowā¦ CSS stands for CASCADING style script. The CASCADING beign the operative term.
an HTML element will inherit the properties from the element wrapped around it , UNLESS they are overridden in a style sheet; and using the rules of specificity described earlier.
in essense , if you wrote a rule for .parent ALL DECENDENT elements in the HTML would inherit those properties, unless wrote .child rules to override them. In other words, if you have an element .parent and INSIDE IT another element .child you should think of .child as only needing to define the additional and exceptions to .parent. but if the .child element is not INSIDE the .parent element in the HTML then it will not have inherited anything from parent.
hope that helps
2 Likes
How Iām interpreting that, you are looking for inheritance between CSS selectors, not HTML elements.
As explained, thatās not how things work.
Inheritance goes from an HTML element to its sub-elements.
Individual rules/selectors in a CSS are unrelated, except in the case of an @ query, where rules belong together within the scope of that query, but are still independant within that scope.
So reading between the lines, you have elements: <p class="parent"> and <p class="parent child">.
These two p elements canāt validly be parent and child within the HTML, so I assume they are either siblings or unrelated, but you want to give them both the same CSS style rule.
The simple answer is: give both elements the same class, and style that class as you wish in the CSS.
Or is there more to this question?
2 Likes
Just to be clear not all properties are inherited by default. If you want a child to inherit the parents padding or borders for example then you would need to state on the child that you want to inherit it.
e.g.
<div><p>test</p></div>
div{
padding:20px;
border:1px solid #000;
}
p{margin:0;background:red;}
p{border:inherit;padding:inherit;}
Certain properties (like font-family and font-size) are automatically inherited and would not need to be specified.
4 Likes
Yes.
This question related to my framework (I wrote about before). If I have hierarchy of components (by extension), I should to build something like data-gi-css="foo foo-bar foo-bar-baz".
Of course, I would like to have just data-gi-css="foo-bar-baz" and declare dependency between foo-bar and foo-bar-baz directly in stylesheet. But as I understood, itās impossible.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.