CSS first-of-type applying to all

Question

Having some issues targeting the a div using the CSS :first-of-type and applying the styling to all. Any ideas on where I'm going wrong?

Working example here

  .message:first-of-type {
      background: purple;
  }

Answer 1

If you want purple background only for first .message use below css. Pseudoclass :first-of-type it's only for type (div, p etc), not class.

.message {
    background: purple;
}
.message ~ .message {
    background: none;
}