CODEWITHSUNDEEP
htmlcss
K. Zakrzewski
K. Zakrzewski

Reputation: 59

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>

Upvotes: 1

Views: 64

Answers (3)

VarinderPal Singh
VarinderPal Singh

Reputation: 26

Just use following code without !important and it will work:

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

Upvotes: 0

kukkuz
kukkuz

Reputation: 42352

Use a more preferred / specific selector for list-click and that will work: 

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

snippet below:

.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 a.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>

Let me know your feedback on this. Thanks!

Upvotes: 0

Turnip
Turnip

Reputation: 36672

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>

Upvotes: 2

Related Questions