How to address correctly in the CSS

Question

I need to change the style of the items in a dropdown, however I don't know how to reach to the specific item:

this is my code:

<li class="nav-item dropdown">
    <a class="nav-link menu-icon dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="navbar-toggler-icon"></span>
    </a>                             
     
    <div class="dropdown-menu change-style">
      <div class="nav-to-one" >
          <a class="dropdown-item font-weight-bold" href="#">Test</a>
          <hr class="card-meta-divider m-2">
          
      </div>
    </div>  
</li>

and I need to change change-style:

.change-style {
   font-family:serif;
}

It does not work in this way!

Your class selector `.change-style` should match the div element `div.dropdown-menu.change-style`. If it's not working, I feel like something's missing from your question, it's not a minimal complete example. Is it possible this is an issue of [CSS specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)? — stealththeninja, Jan 16 '21 at 21:52
Check developer tools, see if your `.change-style` selector matched the dropdown menu element. If so (this means your selector is right), is the font family style not applied? If that's the case, is there another selector applying font styling? — stealththeninja, Jan 16 '21 at 21:53
Have you tried applying anything else, like `font-size: 20px`, `font-weight: bold`, or `background-color: black`? I usually do that to see if I write the correct path. — Rickard Elimää, Jan 16 '21 at 22:37

score 1 · Answer 1 · answered Jan 16 '21 at 21:52

1

You could try to specify further your accessor:

.change-style a {
   font-family: serif;
}

Or you can use !important to force a style to override other styling:

.change-style a {
   font-family: serif !important;
}

answered Jan 16 '21 at 21:52

Adriaan De Bolle

225
1
3
20

Thanks, I tried your solution but does not change anything! – ElisaFo Jan 16 '21 at 21:57
@ElisaFo I suspect your question may be incomplete. There's an option to include a working code sample. Can you demonstrate your issue with a [minimal complete example](https://stackoverflow.com/help/minimal-reproducible-example)? – stealththeninja Jan 16 '21 at 22:02
1

Interesting. If possible you can use the dev console using cmd+option+i or right-click inspect a specific element. And check the computed styling. If you go to font-family you could find the origin where it is defined. – Adriaan De Bolle Jan 16 '21 at 22:03
Yes you are right, my code has some issue! – ElisaFo Jan 17 '21 at 07:11

Adsler · Answer 2 · 2021-01-17T00:03:09.883

.change-style + a {
font-family: serif !important;
}

Or

.dropdown-menu.change-style a {
font-family: serif !important;
 }

Or

.dropdown-menu.change-style + a {
font-family: serif !important;
}

Or

.dropdown-menu a  {
font-family: serif !important;
}

Or

.dropdown-menu + a  {
 font-family: serif !important;
 }

Or

.change-style a  {
 font-family: serif !important;
 }

Or specificity >

.dropdown-menu>.change-style a {
 font-family: serif !important;
 }

But you'll need to specify in your head, either through stylesheet or @import see https://fonts.google.com/specimen/Roboto?selection.family=Roboto:wght@100 for example or here How to import Google Web Font in CSS file? or here https://www.w3schools.com/css/css3_fonts.asp

Also, make sure your CSS is correct. You may not be specifying exactly what you want:

For example:

font-family: 'PT Serif', serif;

May be closer if you're using Google Fonts.

How to address correctly in the CSS

2 Answers2