important property for two screen resolution

Question

Supppose I have following code :

    <ul>
        <li>Menu1
            <ul class="submenu">
                <li class="firstmenu">submenu-1</li>
                <li>submenu-2</li>
                <li>submenu-3</li>
            </ul>
        </li>
        <li>Menu2
            <ul class="submenu">
                <li class="firstmenu" id="first">submenu-1</li>
                <li>submenu-2</li>
                <li>submenu-3</li>
            </ul>
        </li>
    </ul>

Here, I have give padding-left to sub-menu's li first item with following code:

   .submenu li:first-child{padding-left: 173px;}

But for Menu2 's first li, I want different padding.So for that I have used its ID like that :

#first{padding-left:500px !important;} 

So basically, I have overridden the previous left with !important.

Now I want to make it responsive, so for that I am using :

    @media only screen
    and (min-width : 768px)
    and (max-width : 894px) {
        #first{padding-left:150px !important;}
    }

But as I have already given !important to @media all, it is not considering @media only screen and (min-width : 768px) and (max-width : 894px).

So basically I want to use different padding for screen resolution 768 to 894.

Is there any way to do it?

Answer 1

Summary

The !important anotation has the highest priority on the CSS priority scheme. This case is a good example of why is the use of !important discouraged.

The solution is to remove the need of !important. It could be accomplished in many ways, as the one presented below:

.submenu li.firstmenu{
    padding-left: 173px;
}

.submenu li.firstmenu#first{
    padding-left:500px
}

@media only screen
and (min-width : 768px)
and (max-width : 894px) {
    .submenu li.firstmenu#first{
       padding-left:150px;
    }
}

Notes

The selectors above are essentially the same as yours, but use the firstmenu class as it's seen on your HTML layout instead the pseudo-selector :first-child. .submenu li.firstmenu states select a li element whose class is "firstmenu" and is descendant of any element whose class is "submenu", while .submenu li:first-child states select a li element, first child of its parent and descendant of any element whose class is "submenu".

To refine the padding as requested, the id of the target element is used. submenu li.firstmenu#first states select a li element with ID equal to "myid", whose class is "firstmenu" and which is descendant of any element whose class is "submenu". The same result could be accomplished for this HTML layout using only the id selector (#firstmenu), as seen on other answers.

Answer 2

In your case you don't need !important actually, because ID selectors have a higher level of priority than classe/element selectors (unless dozens of classes or hundreds of elements in a single selector). Remove !important and you'll still get what you want.

.submenu li:first-child {
  padding-left: 100px;
}

#first {
  padding-left: 200px;
}

<ul>
  <li>Menu1
    <ul class="submenu">
      <li class="firstmenu">submenu-1</li>
      <li>submenu-2</li>
      <li>submenu-3</li>
    </ul>
  </li>
  <li>Menu2
    <ul class="submenu">
      <li class="firstmenu" id="first">submenu-1</li>
      <li>submenu-2</li>
      <li>submenu-3</li>
    </ul>
  </li>
</ul>

More details please read W3C spec on selectors' specificity, there's a very intuitive table of comparing different selectors.