Using css inheritance when using css selector?

Question

How would I use a CSS inherit when I am using a selector method of styling.

so if I want to style the label I can simply do like this: .stylethis label{style}. But I want to inherit the styles from a different class, like how I am attempting in my CSS, I am trying to inherit style from the class "usethis" to '.stylethis label' .. kind of like this

/* Make second-level headers green */
h2 { color: green; }

/* ...but leave those in the sidebar alone so they use their parent's */
#sidebar h2 { color: inherit; }

I want to do like that, except in the place of #sidebar h2 I would put #sidebar 'my class name'?

.usethis{
color:red;
font-size:12px;
}

.stylethis label .usethis{
color:inherit;
font-size:inherit;

}

<div class="stylethis">

<label>jay chacko</label>

</div>

You might be looking for developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables — G-Cyrillus
– G-Cyrillus, Commented Nov 21, 2017 at 21:42
This is CSS not OOPS. I can't understand what you want. Please clarify — BASEER HAIDER JAFRI
– BASEER HAIDER JAFRI, Commented Nov 21, 2017 at 21:43
@BASEERHAIDER I added an image to the question (#sidebar...). I want to do like that, except in the place of #sidebar h2 I would put #sidebar 'my class name'? — jsPlayer
– jsPlayer, Commented Nov 21, 2017 at 21:51
Do not place images of code in your question. Place the actual code in text in the question. — Erik Philips
– Erik Philips, Commented Nov 21, 2017 at 21:54

agrm · Accepted Answer · 2017-11-21 22:05:49Z

1

Inheritance of CSS values will only work from parent to child, based on the DOM structure (or the HTML if you will). This a working example of CSS inheritance:

<div class="parent">
    <div class="child"></div>
</div>

.parent {
    color: red;
}
.child {
    color: inherit;
}

I might have misunderstood parts of your question, but if you are asking if you can "inherit" values from one selector to another, the answer will be no. Unless you are using a preprocessor such as SASS or LESS, which support variables to be used across CSS selectors. (And unless we are talking about a child element inheriting its parents styles as above)

To elaborate on your provided example, you may wrap a <h2> inside a sidebar and inherit the sidebars font color like below:

h2 {
  color: green;
}
.sidebar {
  color: red;
}
.sidebar h2 {
  color: inherit;
}

<h2>Regular H2</h2>

<div class="sidebar">
  <h2>Sidebar H2</h2>
</div>

edited Nov 21, 2017 at 22:05

answered Nov 21, 2017 at 22:00

agrm

3,8924 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

agrm Over a year ago

I'm glad this could be of help :o) If you need to know more about how CSS inheritance works you may want to check out MDN's explanation on CSS Cascade and Inheritance

wunth · Accepted Answer · 2017-11-21 22:03:28Z

0

It's quite likely I don't understand your problem but perhaps you need to know that you can have multiple classes on elements. It sounds like all you need to do is add the class of the other object whose styles you want.

<div class="stylethis usethis">
    <label>jay chacko</label>
</div>

If this overrides a style you didn't want to override then you can tweak your CSS to get it back by using the CSS selector that targets only the element with both those classes like this

.stylethis.usethis {
    /* styles here */
}

answered Nov 21, 2017 at 22:03

wunth

6344 silver badges13 bronze badges

Collectives™ on Stack Overflow

Using css inheritance when using css selector?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related