K. Zakrzewski K. Zakrzewski - 2 months ago 6
HTML Question

Css styling without !important - how to do this?

I want to style my

a
item in
li
list by adding to it specific class called
.list-click
.

There is my code that is not working unless I use
!important
.

I want to avoid using this so maybe there is someone who know how to solve my problem. I am not using any js script which could overwrite my css or sth like this.



.portfolio-menu {
list-style: none;
width: 200px;
margin: 0;
padding: 0;
}
.portfolio-menu li {
text-transform: uppercase;
text-align: left;
margin-bottom: 30px;
font-weight: bolder;
font-size: 1.2em;
}
.portfolio-menu li a {
text-decoration: none;
color: #4d4d4d;
}
.portfolio-menu li a:hover {
cursor: pointer;
color: #2e2e2e;
}
.portfolio-menu li a:focus {
color: #2e2e2e;
}
.list-click {
color: red !important;
}

<ul class="portfolio-menu">
<li><a href="#portfolio" class="list-click">all</a>
</li>
<li><a href="#portfolio">logo</a>
</li>
<li><a href="#portfolio">icons</a>
</li>
</ul>




Answer

You need to be more specific.

.portfolio-menu li a is more specific than .list-click and so it will always win no matter what order you place it in the style sheet.

.portfolio-menu li .list-click {
    color: red
}

Example:

.portfolio-menu{
  list-style: none;
  width: 200px;
  margin: 0;
  padding: 0;
}
.portfolio-menu li {
  text-transform: uppercase;
  text-align: left;
  margin-bottom: 30px;
  font-weight: bolder;
  font-size: 1.2em;
}

.portfolio-menu li a{
  text-decoration: none;
  color: #4d4d4d;
}

.portfolio-menu li a:hover{
  cursor: pointer;
  color: #2e2e2e;
}
.portfolio-menu li a:focus{
  color: #2e2e2e;
}

.portfolio-menu li .list-click{
  color: red;
}
<ul class="portfolio-menu">
  <li><a href="#portfolio" class="list-click">all</a></li>
  <li><a href="#portfolio">logo</a></li>
  <li><a href="#portfolio">icons</a></li>
</ul>