Css styling without !important - how to do this?


Tags: html,css

Problem :

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>



Solution :

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>  


    CSS Howto..

    How to show the vertical image into horizontal manner using HTML and CSS?

    How do I vertically center an image whose size can change in a div?

    CSS: How to limit horizontal/vertical scrolling?

    How to animate a progress bar in Bootstrap 4?

    How to reference nested classes with css?

    How to align div to the bottom of another div in HTML?

    How to make my

    How do I align a dropdown menu below a
    ?

    Google Share button not showing properly if originaly hidden

    How often to use REM in CSS [closed]

    How to keep a link underlined after it is clicked and then hovered over

    How to force li elements to scroll horizontally and should be able to accommodate all the li elements in only one single line using css

    Bootstrap table. How to remove all borders from table?

    Transition on div height change caused by its inner element showing or hiding

    How to let DOM elements stack and overflow horizontally instead of vertically in HTML?

    How to disable and enable css rule

    CSS how to change page content depending on page size (zoom) in responsive design

    In CSS, how to not float a 300px wide Div to the next line?

    How to place my dropdown CSS menu bar on top of my jQuery picture rotator?

    How do I change the MVC Bootstrap layout to have more than one columns

    How to align two svg masked images on the same line

    How to don't include the google font css in one specific button only?

    How to override background-color for all classes using css?

    CSS - How to display dropdown text in one row?

    How to center banner with jquery mobile?

    How can I “cloak” my Javascript and CSS files using PHP?

    how should i set scrollbar properties in css

    How to use same header for multiple page inside same html file

    CSS/Javascript: How to draw minimal border around an inline element?

    How to stop browser resizing 1px wide image to 0px