An important property for two screen resolutions
Suppose I have the 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 am giving padding to the left of the submenu the li
first item with the following code:
.submenu li:first-child{padding-left: 173px;}
But for Menu2 first li
, I want a different padding. For this I used my ID:
#first{padding-left:500px !important;}
So, basically, I have overridden the previous one on the left !important
.
Now I want to make it responsive, so for that I use:
@media only screen
and (min-width : 768px)
and (max-width : 894px) {
#first{padding-left:150px !important;}
}
But since I have already given !important
before @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 768 to 894 screen resolutions.
Is there a way to do this?
source to share
Summary
Animation !important
has the highest priority in the CSS priority scheme . This case is a good example of why using! Importantly discouraging .
The solution is to eliminate the need !important
. This can be achieved in many ways as shown 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 above selectors are essentially the same as yours, but use a class firstmenu
as shown in the HTML layout, not a pseudo selector :first-child
. .submenu li.firstmenu
state select an element li
whose class is "firstmenu" and is a descendant of any element whose class is a "submenu" and .submenu li:first-child
specifies select li
, the first child of its parent and a descendant of any element whose class is a "submenu".
The id
target element is used to refine the padding as requested . submenu li.firstmenu#first
states select an li element with id equal to "myid", whose class is "firstmenu" and which is a descendant of any element whose class is "submenu". The same result can be accomplished for this HTML layout using only the id ( #firstmenu
) selector as seen in other answers.
source to share
In your case, you don't really need !important
to, because IDs have a higher level of precedence than the classe / element selector (unless there are dozens of classes or hundreds of elements in a single selector). Delete !important
and you 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>
Read more in the W3C spec for selector specificity , there is a very intuitive table comparing different selectors.
source to share