Nth-child and before
I have a CSS problem, I need to do this
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;
}
but i cant place two pseudo elements and i tested it (not working), also tried other ways but couldnt figure it out.
source to share
:nth-child()
doesn't filter on classes or whatever. In your code, your first is ul.sub-comment
not the very first child in #comments-wrapper
, so it doesn't work.
Instead, use this selector technique and invert the styles height
and margin-top
like this:
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 */
}
Basically, instead of :nth-child(1)
(or :first-child
for that matter), use a sibling selector with another ul.sub-comment
to apply the original styles to all subsequent elements ul.sub-comment
after the first.
Updated script (also inverted the styles background-color
so the first one stays blue)
source to share