Text color won't change on LI elements

Question

As you can see on my code, on the left panel, i have an UL and 2 LI.

I want all LI as white color.

I've set style but is not professional, perhaps setting my own style:

lblBiancoMenu does not affect

what can i do?

.lblBiancoMenu {
  color: white;
}

;
.subCat .li {
  color: white;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Pushy - Off-Canvas Navigation Menu</title>
  <meta name="description" content="Pushy is an off-canvas navigation menu for your website.">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


  <!-- Icons list-> https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp-->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

</head>

<body>


  <div data-role="page" id="pageone">

    <div style=" background-color: #101010;  color: #ffffff;">
      <h2 id="listCateg">Categories</h2>


      <div id="SubCat3" class='subCat'>
        <ul>
          <li><a style="color:white" href="#">3</a></li>
          <li><a class="lblBiancoMenu" href="#">4</a></li>
        </ul>
      </div>
    </div>





  </div>


</body>


</HTML>

Michael Benjamin · Answer 1 · 2021-03-11T16:22:07.837

The theme you're importing has its own CSS styles. The color rule being imported has a higher specificity than your rule, so your rule is being overridden.

To override the theme styles, either use inline CSS (as you have done). Embedding the CSS in the HTML tag gives it higher specificity.

Or use the !important annotation, which overrides all other CSS declarations.

Use this in your code:

.lblBiancoMenu {
  color: white !important;
}

.lblBiancoMenu {
  color: white !important;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Pushy - Off-Canvas Navigation Menu</title>
  <meta name="description" content="Pushy is an off-canvas navigation menu for your website.">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


  <!-- Icons list-> https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp-->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

</head>

<body>


  <div data-role="page" id="pageone">

    <div style=" background-color: #101010;  color: #ffffff;">
      <h2 id="listCateg">Categories</h2>


      <div id="SubCat3" class='subCat'>
        <ul>
          <li><a style="color:white" href="#">3</a></li>
          <li><a class="lblBiancoMenu" href="#">4</a></li>
        </ul>
      </div>
    </div>





  </div>


</body>


</html>

Text color won't change on LI elements

1 Answers1