Important Property For Two Screen Resolution

Supppose I have following code :

• Menu1
  • submenu-1

Solution 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:

.submenuli.firstmenu{
    padding-left: 173px;
}

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

@mediaonly screen
and (min-width : 768px)
and (max-width : 894px) {
    .submenuli.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.firstmenustatesselect a li element whose class is "firstmenu" and is descendant of any element whose class is "submenu", while .submenu li:first-childstatesselect 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#firststatesselect 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.

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

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

#first {
  padding-left: 200px;
}

<ul><li>Menu1
    <ulclass="submenu"><liclass="firstmenu">submenu-1</li><li>submenu-2</li><li>submenu-3</li></ul></li><li>Menu2
    <ulclass="submenu"><liclass="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.