: nicht (: leer): First-of-Type funktioniert nicht?

Question

Ich möchte einen Text direkt vor dem ersten nicht leeren Element mit der Klasse error zeigen. Ich habe .error:not(:empty):first-of-type::before verwendet, aber es funktioniert nicht. Was vermisse ich?

.error:not(:empty):first-of-type::before { 
    content: attr(seq); 
    display: block; 
    background-color:red; 
} 

funktioniert nicht:

<div> 
    <p class="error" seq="Error #1" ></p> 
    <p class="error" seq="Error #2">2</p> 
    <p class="error" seq="Error #3">3</p> 
    <p class="error" seq="Error #4"></p> 
    <div><b> Some text here </b> 
    <p></p> 
</div> 

Adaequat:

<div> 
    <p class="error" seq="Error #1" >1</p> 
    <p class="error" seq="Error #2">2</p> 
    <p class="error" seq="Error #3">3</p> 
    <p class="error" seq="Error #4"></p> 
    <div><b> Some text here </b> 
    <p></p> 
</div> 

https://jsfiddle.net/71L7nvoy/

PS: Ich habe auch versucht :firts-child. Hat auch nicht funktioniert.

Answer 1

:first-of-type bedeutet "Das erste Element des Typs (aka Tag-Name)" nicht "Das erste Element, das mit dem Rest des Selektors übereinstimmt".

CSS-Selektoren bieten keine Möglichkeit, den gewünschten Zustand zu beschreiben. Sie müssen einen anderen Ansatz wählen (z. B. Hinzufügen eines zusätzlichen Klassennamens, wenn Sie den HTML-Code generieren).