Menu
Bonjour,
I would like to make sure to always have the same padding in <li>, but when it's a link that the padding is in the <a> (for large selection area).
li a {
padding: 1rem;
}
li:not(a) {
padding: 1rem;
}<ul>
<li><a href='#'>Text</a></li>
<li>Text</li>
<li><a href='#'>Text</a></li>
</ul><a> when it exists and no more in the <li>
<a> the padding is in the <li>
354
In CSS, to exclude a particular class, we can use the pseudo-class :not selector also known as negation pseudo-class or not selector. This selector is used to set the style to every element that is not the specified by given selector. Since it is used to prevent a specific items from list of selected items.
Add some css class to the "active" li element and change the selector of the attached handler, so that it attaches only to it: $("li. someCssClass").
To specify the style for a list, use the list-style property to specify the type of marker. The selector in your CSS rule can either select the list item elements li , or it can select the parent list element ul so that its list elements inherit the style.
The :not() pseudo-class requires a comma-separated list of one or more selectors as its argument. The list must not contain another negation selector or a pseudo-element.
Our CSS would select all the <li> elements except the one (s) with a class of .different. You could also do the same using pseudo classes which are considered a simple selector. However, if we use a pseudo-element selector as our argument it will not produce the expected result.
The first selector selects all a elements that do not have class attribute, the latter one selects all with empty class attribute. The same technique can be used to select any other elements with empty attribute. The selector will match for example:
This means it will only select list items that are direct children of an unordered list. In otherwords, it only looks one level down the markup structure, no deeper. So if there was another unordered list nested deeper, the list item children of it will not be targeted by this selector.
this should be the way :not () must work! that last example says… that every li element will have {content:”●”} except .menu-item.. Is saying “Every li AND Every li that isn’t .menu-item should have content ●”.
The solution is to use negative margins on the a, and then the a's padding will be in the same position as the li's.
li {
padding: 1rem;
}
li a {
margin: -1rem;
padding: 1rem;
}<ul>
<li><a href='#'>Text</a></li>
<li>Text</li>
<li><a href='#'>Text</a></li>
</ul>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
