css selectors

css last three child only if condition  #angularjs #reactjs

  • if there are 9
  • elements in
      , I want elements 1-6 to have font-weight:normal and elements 7,8 and 9 to have font-weight:bold.
    • In case there are more than three elements, you can simplify it to
    • @BoltClock Well, I didn’t explain that very well, I meant type selectors still match lots of things, and * is needed in the more general case the elements may have different types (but li would be enough).
    • @haxxxton if there are 10 items, then i want the first nine to be normal font weight and the tenth item to be bold.
    • Rather than using n notation on :nth-last-child you can just use a number on :nth-child .

    I’m trying to learn how to select the

  • among the last three elements of a
      such that their (one-based) index is greater than the greatest multiple of 3 which is smaller than the number of list elements.

      @ng_real_ninja: css last three child only if condition #angularjs #reactjs

      I think you want

      That is, it selects the element among the last 3 whose index mod 3 is 1. And then it also adds the following siblings (if any).

      /* Tests */ document.styleSheets[0].ownerNode.textContent += “.fail { color: red; } .fail::after { content: ‘ – FAIL’; }” for (var i=0; i<10; ++i) { var ul = document.body.appendChild(document.createElement('ul')); for (var j=0; j<=i; ++j) { var li = ul.appendChild(document.createElement('li')); li.appendChild(document.createTextNode(j+1+'-th item ')); } for (var j=0; j<=i; ++j) { var li = ul.children[j]; var isSelected = getComputedStyle(li).fontWeight === '700'; if(isSelected !== (j >= Math.floor(i/3)*3)) li.className = “fail”; } }

      In case there are more than three elements, you can simplify it to

      That is, it gets the element(s) among the last 4 whose index is a multiple of 3. And then it selects the following siblings.

      /* Tests */ document.styleSheets[0].ownerNode.textContent += “.fail { color: red; } .fail::after { content: ‘ – FAIL’; }” for (var i=0; i<10; ++i) { var ul = document.body.appendChild(document.createElement('ul')); for (var j=0; j<=i; ++j) { var li = ul.appendChild(document.createElement('li')); li.appendChild(document.createTextNode(j+1+'-th item ')); } for (var j=0; j<=i; ++j) { var li = ul.children[j]; var isSelected = getComputedStyle(li).fontWeight === '700'; if(isSelected !== (j >= Math.floor(i/3)*3)) li.className = “fail”; } }

      And if you dislike universal selectors,

      /* Tests */ document.styleSheets[0].ownerNode.textContent += “.fail { color: red; } .fail::after { content: ‘ – FAIL’; }” for (var i=0; i<10; ++i) { var ul = document.body.appendChild(document.createElement('ul')); for (var j=0; j<=i; ++j) { var li = ul.appendChild(document.createElement('li')); li.appendChild(document.createTextNode(j+1+'-th item ')); } for (var j=0; j<=i; ++j) { var li = ul.children[j]; var isSelected = getComputedStyle(li).fontWeight === '700'; if(isSelected !== (j >= Math.floor(i/3)*3)) li.className = “fail”; } }

      child element and style them,

      That should give you the last 3 elements even if the list is dynamic. Whether the list has 10, 20 or 30 elements, it will always target the last 3

      . Mind you, both of these solutions are technically targeting the first 6 items to override the styles that would be applied to the remaining list items.

      If you truly wanted to select all elements after the last 6 you would use:

      css selectors