How to skip adding CSS rule to first li element using not(first)

Question

I am working on the code below. What am I not able to not add the CSS rule to the first item using the not option?

li:not(first) {
  color: red;
}

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Item 2-1</li>
      <li>Item 2-2</li>
      <li>Item 2-3</li>
      <li>Item 2-4</li>
    </ul>
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Answer 1

You probably meant :not(:first-child) (there is no CSS first). There is :first but that's for printing:

The :first @page CSS pseudo-class describes the styling of the first page when printing a document.

li:not(:first-child){  color:red;  }

<ul>
        <li>Item 1</li>
        <li>Item 2
                <ul>
                    <li>Item 2-1</li>
                    <li>Item 2-2</li>
                    <li>Item 2-3</li>
                    <li>Item 2-4</li>
                </ul>
         </li>
        <li>Item 3</li>
        <li>Item 4</li>
</ul>

You could also do li:not(:first-of-type):

li:not(:first-of-type){  color:red;  }

<ul>
        <li>Item 1</li>
        <li>Item 2
                <ul>
                    <li>Item 2-1</li>
                    <li>Item 2-2</li>
                    <li>Item 2-3</li>
                    <li>Item 2-4</li>
                </ul>
         </li>
        <li>Item 3</li>
        <li>Item 4</li>
</ul>

Or li:not(:nth-child(1)):

li:not(:nth-child(1)){  color:red;  }

<ul>
        <li>Item 1</li>
        <li>Item 2
                <ul>
                    <li>Item 2-1</li>
                    <li>Item 2-2</li>
                    <li>Item 2-3</li>
                    <li>Item 2-4</li>
                </ul>
         </li>
        <li>Item 3</li>
        <li>Item 4</li>
</ul>

Or li:not(:nth-of-type(1)):

li:not(:nth-of-type(1)){  color:red;  }

<ul>
        <li>Item 1</li>
        <li>Item 2
                <ul>
                    <li>Item 2-1</li>
                    <li>Item 2-2</li>
                    <li>Item 2-3</li>
                    <li>Item 2-4</li>
                </ul>
         </li>
        <li>Item 3</li>
        <li>Item 4</li>
</ul>

By the way, if you're wondering why the inner list doesnt have its first element's color changed it because color is an inherited property.

Answer 2

You got the syntax wrong

 li:not(:first-child)