Nth-child skips a specific class less

Question

I need to select the nth child of a class, not counting the elements of a particular class less. For example, given:

Li
li class = "skip_this"
lithium
lithium
Li

I want nth-child to skip the skip_this class when counting, which means that if I wanted 3rd not to be skip_this, it would actually choose 4th because it wouldn’t count the one who skip_this

Answer 1

Use : not () e.g.

li:nth-child(2n):not(.skip_class){

}

li:nth-child(2n):not(.skip_class){
    background:green;
    }

<ul>
 
   <li>test</li>
   <li class="skip_class">test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
  </ul>

Run codeHide result

Update

, , "skip_class", , "skip_class"

sibling +,

li:nth-child(2n):not(.skip_class), .skip_class + :not(.skip_class)

li:nth-child(2n):not(.skip_class),
.skip_class +:not(.skip_class) {
  background: green;
}

<ul>

  <li>test</li>
  <li class="skip_class">test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

Hide result

Udpate

, (), , , nth-child nth-of-type .

(:not(.skip_class)), (nth-child)

. : nth-child() : nth-of-type() ?

Answer 2

, "", ( ), :nth-child, . CSS ( ""

li:not(.skip) 
    ~ li:not(.skip) 
        ~ li:not(.skip) 
            ~ li:not(.skip)
                ...
                    ~ li:not(.skip) {}

), , .

Codepen

( , ), " n-" .

/*
    "Please hack me to support Less" kernel. 
    
    Created by @aaronlayton
    Modified by meri
    Updated by max
*/

// Step 1: Select the style element and change it to text/less
$('head style').attr('type', 'text/less');

// Step 2: Set development mode to see errors
less.env = 'development';

// Step 3: Tell Less to refresh the styles
less.refreshStyles();

@colors:
    #E74C3C
    #C0392B
    // #E67E22
    // #D35400
    #F1C40F
    #F39C12
    #2ECC71
    #27AE60
    // #1ABC9C
    // #16A085
    #3498DB
    #2980B9
    #9B59B6
    #8E44AD
    #34495E
    #2C3E50;

.make-rainbow(@colors, skipme);

li {
    padding: .5em;
    width:    2em;
    &:after {margin-left: 2em}
}

// ..................................
// impl:

.make-rainbow(@colors, @skip-class) {
    @next: ~;
    @n: length(@colors);
    .-; .-(@i: 1) {
        li:not(.@{skip-class}) {
            background-color: extract(@colors, @i);
            &:after {content: "@{i}"};
            @{next} when (@i < @n) {
                .-(@i + 1);
            }
        }
    }
}

<ul>
    <li>test</li>
    <li>test</li>
    <li class="skipme">skip</li>
    <li>test</li>
    <li class="skipme">skip</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li class="skipme">skip</li>
    <li>test</li>
    <li>test</li>
</ul>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>

Hide result