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

171
September 11, 2017, at 08:40 AM
<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 is my html and I don't know how many li are there.

Now I want to give style to the very first and very last li but without using any pseudo class like first-child last-child last-type-of etc.
And I don't want to use any html attribute nor class as well as no javascript or jquery.

Is it possible just using css?

Answer 1

Actually this is not possible! For Sure...

Answer 2

without pseudo class, class nor javascript there is no way.

To give content to this answer and for the fun , here is a funny trick to give different colors to the first and last li . but do not try to use this in real. it breaks and mix-blend-mode needs to be supported.

* { 
  padding: 0; 
} 
 
ul { 
  margin: 1em; 
  float: left; 
} 
 
li { 
  color: green; 
  background: white; 
  /*only for tricking last li color*/ 
  mix-blend-mode: screen/*only for tricking last li color*/ 
} 
 
li+li { 
  /* first one is skipped */ 
  color: black; 
} 
 
ul { 
  /*only for tricking last li color*/ 
  background:  
  linear-gradient(to top, red 1.25em, transparent 1.4em),  
  /* extra fun */linear-gradient( to 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 to play with

Answer 3

No. It is not possible.

There shouldn't be any reason for not using pseudoclasses really though.

READ ALSO
How to add 2 myFunctions?

How to add 2 myFunctions?

I have added a myFunction code to my siteNo problem, it works

177
First time using @media screen

First time using @media screen

It did not go so well

189
Hide table row based on checkbox in pure CSS

Hide table row based on checkbox in pure CSS

A bit of backstory, for those who care: some time ago I stumbled across this: https://mediumcom/front-end-hacking/how-it-feels-to-learn-javascript-in-2017-a934b801fbe, and in particular, this: https://brlewis

188
Slide Reverse Transitions, Vue Js

Slide Reverse Transitions, Vue Js

I'm developing a single page application / mobile app, with VueJS

250