html - Is it possible to change the style using css only but not using any pseudo classes? -

<ul>     <li>number 1</li>     <li>number 2</li>     <li>number 3</li>     <li>number 4</li>     <li>number 5</li>     <li>number 6</li>     <li>number 7</li>     <li>number 8</li>     <li>number 9</li>     <li>number n</li> </ul> 

this html , don't know how many li there.

now want give style first , last li without using pseudo class first-child last-child last-type-of etc.
, don't want use html attribute nor class no javascript or jquery.

is possible using css?

without pseudo class, class nor javascript there no way.

to give content answer , fun , here funny trick give different colors first , last li . not try use in real. breaks , mix-blend-mode needs supported.

* {    padding: 0;  }    ul {    margin: 1em;    float: left;  }    li {    color: green;    background: white;    /*only tricking last li color*/    mix-blend-mode: screen/*only tricking last li color*/  }    li+li {    /* first 1 skipped */    color: black;  }    ul {    /*only tricking last li color*/    background:     linear-gradient(to top, red 1.25em, transparent 1.4em),     /* fun */linear-gradient( bottom, black 6em, gray 6em, gray 7.3em, black 7.3em);    ;  }    .disclaimer {    mix-blend-mode: overlay  }

<ul>    <li>number 1 green</li>    <li>number 2</li>    <li>number 3</li>    <li>number n red</li>  </ul>  <ul>    <li>number 1</li>    <li>number 2</li>    <li>number 3</li>    <li>number 4</li>    <li>number 5</li>    <li>number 6 <strong class=disclaimer>mix-blend-mode not supported here !</strong></li>    <li>number 7</li>    <li>number 8</li>    <li>number 9</li>    <li>number n</li>  </ul>

pen play with

---

flex can fake it, last not last

ul {    display: flex;    flex-flow: column;    counter-reset: li;    list-style-position:inside;  }    li {    color: green;    background:yellow;  }    li+li {    color: crimson;    order: 2;  }    li+li+li {    order: 1;    color: blue;    background:lightgray;  }    li:before {    counter-increment: li;    content: counter(li);  }

<ul>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>  </ul>

https://codepen.io/gc-nomade/pen/wrglpw