CSS inherit between parent and child class

Question

I'm looking for some code improvments and I would like to know something. I have this code structure :

<div class="container exports">
    <div class="row">
      <form>
        <fieldset>
          <legend class="title">Export to .csv files</legend>
              ...
        </fieldset>
      </form>
    </div>
</div>

I would like to change the legend color which is defined in white by default to black. But I don't want to affect other legends.

So in my css code, I have this :

legend {
    color: black;
}

It change color for all legends.

But when I write this :

.exports legend.title {
    color: black;
}

It doesn't apply my specific legend in black color.

Why ?

The code in your question works as expected: http://jsfiddle.net/3rror404/y4xfek52/1// [Use your browsers developer tools to view the styles that are applied to the element](https://stackoverflow.com/questions/34689619/how-do-you-determine-what-is-overriding-your-style). — Turnip, Oct 11 '18 at 14:51

André DS · Answer 1 · 2018-10-11T14:48:46.577

-1

To me, your code should work (example with blue).

You must have another property that overwrites this one. Can you check this ?

.exports legend.title {
    color: blue;
}

<div class="container exports">
    <div class="row">
      <form>
        <fieldset>
          <legend class="title">Export to .csv files</legend>
              ...
        </fieldset>
      </form>
    </div>
</div>

edited Oct 11 '18 at 14:48

answered Oct 11 '18 at 14:46

André DS

1,823
1
14
24

It doesn't work. legend is defined inside a global bootstrap library in my project. But locally, I would like to make some changes. – Essex Oct 11 '18 at 14:48
Did you check, as I said (using a debugging tool) that there is no other property override this one ? – André DS Oct 11 '18 at 14:50
How I could make mine to override others ? – Essex Oct 11 '18 at 14:56
As Marco said, you should be more precise on your selector, or you can place your CSS after others. I'll wont tell you to use "!important", it's better to find a clean way to do this. (see https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance) – André DS Oct 11 '18 at 14:58

Marco Dal Zovo · Answer 2 · 2018-10-11T15:01:36.997

A possible mistake could be that you are saying

.exports legend.title { color: black; }

before the general legend color specification or another css file is overwriting it... You have two ways:

Place your specific legend color after the generic one or refernce the mistaken css after yours
use !important to overwrite all rules (i don't recommend that way because everytime you want to overwrite that rule, you have to use !important again):

.exports legend.title { color: black !important; }

NIDHIN VINCENT · Answer 3 · 2018-10-11T15:01:56.347

-1

I have tried this method. .exports legend.title{ color:#ff0000;} And it's working for me.

.exports legend.title{ color:#ff0000;}

<div class="container exports">
    <div class="row">
      <form>
        <fieldset>
          <legend class="title">Export to .csv files</legend>
              ...
        </fieldset>
        
        <fieldset>
          <legend class="">Export to .csv files</legend>
              ...
        </fieldset>
      </form>
    </div>
</div>

edited Oct 11 '18 at 15:01

answered Oct 11 '18 at 14:57

NIDHIN VINCENT

225
1
2
9

Same here it works with given code. The problem seems to be somewhere else. – André DS Oct 11 '18 at 15:00
Is there any other styles overwriting this style? – NIDHIN VINCENT Oct 11 '18 at 15:03
1

without knowing that we can't help him.. :) – NIDHIN VINCENT Oct 11 '18 at 15:05

CSS inherit between parent and child class

3 Answers3