tag id style not respected

Question

I want to change style for 'id=koll' but the css file still reads the style info for 'id=koll' from '#kava p'

#kava p {
  font-size: .9rem;
  margin-top: 15px;
  line-height: 1.4rem;
  font-family: 'Tajawal', sans-serif;
  font-weight: 400;
}

#koll {
  font-weight: 400;
  font-size: 1.2rem;
}

<div id='kava'>
  <ol>
    <li>
      <h4>title</h4>
      <p id="koll">sdsd sdg s sdfsdf</p>
      <p>sldfhs sdfh sd sdufhs f sdufhsd</p>
    </li>
  </ol>
</div>

use this css: #kava p#koll {font-weight: 400;font-size: 1.2rem;} — Mohit Gupta, Feb 01 '19 at 12:05

score 1 · Accepted Answer · answered Feb 01 '19 at 12:03

1

It's happening because of strong inheritance.

#kava p {
  font-size: .9rem;
  margin-top: 15px;
  line-height: 1.4rem;
  font-family: 'Tajawal', sans-serif;
  font-weight: 400;
}

#kava #koll {
  font-weight: 400;
  font-size: 1.2rem;
}

<div id='kava'>
  <ol>
    <li>
      <h4>title</h4>
      <p id="koll">sdsd sdg s sdfsdf</p>
      <p>sldfhs sdfh sd sdufhs f sdufhsd</p>
    </li>
  </ol>
</div>

answered Feb 01 '19 at 12:03

Abhishek Pandey

13,302
8
38
68

it's not about inheritance but specificity – Temani Afif Feb 01 '19 at 12:25
1

Thanks, that worked :) – Allar Feb 01 '19 at 14:06

tag id style not respected

1 Answers1