n-te-Kind und vor

Question

Ich bin ein CSS Problem mit, ich brauche diesen

article div#comments-wrapper ul.sub-comment:before { 
    width:1px; 
    height:67px; 
    background-color:#e4e4e4; 
    position:absolute; 
    margin-left:-595px; 
    margin-top:-36px; 
    content:''; 
} 
article div#comments-wrapper ul.sub-comment:nth-child(1):before { 
    height:37px; 
    margin-top:-6px; 
} 

zu erreichen, aber ich kann zwei Pseudo nicht wie die Elemente setzen, und ich habe es getestet (nicht Arbeit), auch einige andere Möglichkeiten versucht, aber nicht geschafft, es herauszufinden.

Answer 1

:nth-child() filtert nicht nach Klassen oder irgendetwas. In Ihrem Code ist Ihre erste ul.sub-comment nicht das erste Kind in #comments-wrapper, so dass es nicht funktioniert.

Verwenden Sie stattdessen this selector technique und invertieren Ihre height und margin-top Arten wie folgt:

article div#comments-wrapper ul.sub-comment:before { 
    width:1px; 
    height:37px; /* was 67px in your code */ 
    background-color:#e4e4e4; 
    position:absolute; 
    margin-left:-595px; 
    margin-top:-6px; /* was -36px in your code */ 
    content:''; 
} 
article div#comments-wrapper ul.sub-comment ~ ul.sub-comment:before { 
    height:67px; /* was 37px in your code */ 
    margin-top:-36px; /* was -6px in your code */ 
} 

Grundsätzlich statt :nth-child(1) (oder :first-child für diese Angelegenheit), ein Geschwister-Selektor mit einem anderen ul.sub-comment verwenden, um die ursprünglichen Arten anzuwenden zu allen nachfolgenden ul.sub-comment Elementen nach dem ersten.

Updated fiddle (invertiert auch die background-color Stile so die erste blau bleibt)