1

I found this css code, but need to understand it better:

.tes>li:not(template)~:not(template) {
  color: red;
}
<ul class="tes">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

enter image description here

Style all sibling exept the first one. Please explain that and also the browser support too. Thanks

Demo here

MefAldemisov
  • 867
  • 10
  • 21
Pratikno Rulianto
  • 1,049
  • 7
  • 8

1 Answers1

3
.tes>li:not(template)~:not(template) {
  color: red;
}

.tes>li:not(template) - Find the first li inside .tes which is not template - Not clear on what template is

:not() selector is for ommiting some selector from a general call for example: input:not([type='checkbox']) - this will count for all input types that are NOT checkboxes.

:not() should hold a selector in it (like you would use it regularly on css i.e: p:not(.lead) or as mentioned in the example above.)

~ Is a Subsequent-sibling combinator Which basically says, retrieve all the siblings elements that match the selector on the right, starting from the sibling that is matched in the left.

It's not clear from your demo what is template, but you are asking for all types of elements that are siblings after the first li, but i'm guessing, in your example it just ignores that :not(template) - Because nothing matches template and is retrieving all the elements that are siblings to the first li.

For example this will achieve the same result:

.tes>li ~ li  {
  color: red;
}
<ul class="tes">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
fedesc
  • 2,554
  • 2
  • 23
  • 39
  • 1
    Thanks for the explanation, but i still don't understand what `template` is, it's not cause any error, means that `template` is valid selector. – Pratikno Rulianto Jul 10 '20 at 12:44
  • 1
    This means it is looking for `` which doesn't exists, so everything that is not ` – fedesc Jul 10 '20 at 12:45