Destroy or recalculate CSS nth-child selector

css, css-selectors, jquery, jquery-selectors

Solution

After the comments i think what you need is to override that class to make it just equal with the properties for all `li` elements, you can make your own class that match those elements with a better level of specificity, for example with the `id` or `class` of the parent ul:

#parent .teamlist li:nth-child(3n+3) {
    margin-right:2%;
}

Or with an id on your `ul`

<ul class="teamlist" id="lista">

#lista.teamlist li:nth-child(3n+3) {
    margin-right:2%;
}

Also try to be sure your CSS is loaded after the other one

Other way you can work with Jquery too and modify this with the same CSS selector:

$('.teamlist li:nth-child(3n+3)').css('margin-right','2%');

Problem

Context: I have a list. Using jQuery, I'm dynamically... - ...hiding/showing certain list-items. - ...calculating the third and fourth list-items to apply specific classes. Problem: A CSS style (from a stylesheet), using an nth-child selector, is being applied to every third list item. The problem is that when I dynamically hide/show list items, the CSS nth-child selector doesn't seem to be recalculating. Since jQuery is already calculating the third list item, I don't need to recalculate the CSS nth-child selector unless there is no means of cancelling it out or destroying it. Code: The mark-up: ``` <ul class="teamlist"> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> </ul> ``` The jQuery: ``` $('.teamlist li:visible').each(function (i) { if (i % 3 == 0) $(this).addClass('teamlist_fourth_item'); }); $('.teamlist li:visible').each(function (i) { if ((i+1) % 3 == 0) $(this).addClass('teamlist_third_item'); }); ``` The unwanted CSS: ``` .teamlist li:nth-child(3n+3) { margin-right: 0; } ``` Question: How do I destroy or force the recalculation of CSS nth-child selector?

Original source