CSS for sel1-2

  <script>
    li + li + li + li + li  { background-color: #ccc; }  # 0,0,0,5
     li + li + li  { background-color: #00c; }  # 0,0,0,3
     li + li  { background-color: #c00; }  # 0,0,0,2
     li  { background-color: #0c0; }  # 0,0,0,1
     .class  { background-color: #00000e; color: white; }  # 0,0,1,0
  </script>
  

Page Content

<h3>This example starts to look at combinators</h3>
<ul>
 <li>List Item 1 with no preceeding siblings</li>
 <li>List Item 2 follows 1 sibling - triggers two rules</li>
 <li>List Item 3 follows 2 sibling - triggers three rules</li>
 <li>List Item 4 follows 3 sibling - triggers three rules</li>
 <li class="class">List Item 5 follows 4 sibling - triggers five rules.
   The class rule wins because it's specifier is in slot 2.</li>
</ul>
<p>It looks like the bullet point on Item 5 is gone, but it's not.
It is drawn in the color 'white', so it blends into the background!</p>
  

This example starts to look at combinators

• List Item 1 with no preceeding siblings
• List Item 2 follows 1 sibling - triggers two rules
• List Item 3 follows 2 sibling - triggers three rules
• List Item 4 follows 3 sibling - triggers three rules
• List Item 5 follows 4 sibling - triggers five rules. The class rule wins because it's specifier is in slot 2.

It looks like the bullet point on Item 5 is gone, but it's not. It is drawn in the color 'white', so it blends into the background!