CSS to target class within attribute

Question

I have a navigation item in a div, I just want to target this one with an attribute value, But my CSS does not work so far. Code so far below is:

I am trying to target the navDepts class

HTML

 <div class="primary-nav" data-name="about">
        <div class="subNav">
                <ul class="navDepts">
                    <!-- <li></li>-->
                </ul>
        </div>
 </div>

CSS

.primary-nav [data-name="about"] .subNav ul .navDepts {
  display: none!important;
}

_.primary-nav[data-name="about"] .subNav ul.navDepts_ you have extra space, remove it — Sfili_81, Sep 03 '19 at 10:28
Voting to Close as this question was caused by a problem that can no longer be reproduced or a simple typographical error. While similar questions may be on-topic here, this one was resolved in a manner unlikely to help future readers. — Paulie_D, Sep 03 '19 at 10:33

user9408899 · Accepted Answer · 2019-09-03T10:41:27.940

4

Try removing ul from your CSS. Because ul and .navDepts are on the same level.

.primary-nav[data-name="about"] .subNav .navDepts {
  display: none!important;
}

edited Sep 03 '19 at 10:41

answered Sep 03 '19 at 10:27

user9408899

4,202
3
19
32

score 0 · Answer 2 · answered Sep 03 '19 at 10:32

Your CSS inheritance is not proper:

.primary-nav[data-name="about"] .subNav ul.navDepts {
  background: red;
}

<div class="primary-nav" data-name="about">
        <div class="subNav">
                <ul class="navDepts">
                    <!-- <li></li>-->sadsadsad
                </ul>
        </div>
 </div>

score 0 · Answer 3 · answered Sep 03 '19 at 10:33

I found two mistakes in your code.

First one is that there should not be any space between attribute selector and related class.
Second, I presume that you mean to select ul with .navDepts class. So I removed the space between them.

So here is the corrected css:

.primary-nav[data-name="about"] .subNav ul.navDepts {
  background: red;
  width: 100px;
  height: 100px;
}

.primary-nav[data-name="about"] .subNav ul.navDepts li{
  background: yellow;
}

<div class="primary-nav" data-name="about">
  <div class="subNav">
    <ul class="navDepts">
      <li>list item</li>
    </ul>
  </div>
</div>

score 0 · Answer 4 · edited Sep 03 '19 at 11:26

0

Add this CSS . May it will help you out.

   .primary-nav [data-name="about"] >.subNav ul.navDepts {
        display: none;
    }

edited Sep 03 '19 at 11:26

Artem Arkhipov

7,025
5
30
52

answered Sep 03 '19 at 10:39

supriya suresh g

385
1
2
13

CSS to target class within attribute

4 Answers4