Apply css to direct child only

Question

I have learnt that > will apply css to direct child only. However I am unable to use it in my case.

I have html as

table[id="tbl"] div div > span {
  font-weight: bold
}

<table id="tbl">
  <tr>
    <td>
      <div>
        <div>
          <span>
          outer span
          <div>
          <span>
            inner span
          </span>
        </div>
        </span>
      </div>
      </div>
    </td>
  </tr>
</table>

I want to make outer span bold so I wrote css as below

table[id="tbl"] div div > span {
    font-weight:bold
}

but my both the spans are coming in bold. I have to do it without changing html, just by using css or jQuery for some reason.

score 3 · Accepted Answer · answered Sep 16 '16 at 07:34

3

Inner elements gets inherited style rules. Thus, you need to override for your inner elements. Also, simply use id selector instead of attribute selector.

#tbl div div > span {
    font-weight:bold;
}

#tbl div div > span span{
    font-weight:normal;
}

answered Sep 16 '16 at 07:34

Bhojendra Rauniyar

83,432
35
168
231

1

No. We can't prevent inherit in such. – Bhojendra Rauniyar Sep 16 '16 at 07:36

score 3 · Answer 2 · edited May 23 '17 at 12:08

Maybe you should consider restructuring your HTML instead? You are nesting divs inside spans etc which really isn't allowed in HTML (see What elements can a span tag contain in HTML5? for more details).

A less complex tree makes it easier to write CSS to go with it and you're less prone to paint yourself into a corner of complex CSS expressions where changing the tiniest thing can break everything.

Adding classes to your HTML elements could also make it easier to style it and perhaps even have better performance (see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS for some hints to CSS performance).

You are absolutely right. But as I mentioned I cannot. And the reason is html is encapsulated in third party .net custom controls and I have no access to it's source. — Imad, Sep 16 '16 at 08:57

score 0 · Answer 3 · edited Sep 16 '16 at 09:00

0

Please try it working perfect

#tbl div div > span {
  font-weight: bold;
}
#tbl div div > span span {
  font-weight: normal !important;
}

<table id="tbl">
  <tr>
    <td>
      <div>
        <div>
          <span>
            outer span
            <div>
              <span>
                inner span
              </span>
            </div>
          </span>
        </div>
      </div>
    </td>
  </tr>
</table>

edited Sep 16 '16 at 09:00

Al Foиce ѫ

4,195
12
39
49

answered Sep 16 '16 at 07:44

Nitya Kumar

967
8
14

Isn't it copy of other answer? – Imad Sep 16 '16 at 07:47
see changes : font-weight:normal !important; – Nitya Kumar Sep 16 '16 at 07:49
without use (l !important) not working i tested in chrome – Nitya Kumar Sep 16 '16 at 07:53

Apply css to direct child only

3 Answers3