nth-child and before

Question

I'm having an CSS problem, i need to achieve 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 can't put two pseudo elements like that, and i've tested it (doesn't work), also tried some other ways but didn't manage to figure it out.

I'm pretty sure that works. What problem exactly are you facing? — BoltClock, Mar 23 '12 at 21:47
This is valid, but the current implementations may have trouble interpreting it properly. — jwueller, Mar 23 '12 at 21:49
The following works: http://jsfiddle.net/9KkeK/. So your problem lies elsewhere. — Madara's Ghost, Mar 23 '12 at 21:50
http://jsfiddle.net/9KkeK/1/ i posted my code there, one line should be red and other blue.. :S — Kristjan, Mar 23 '12 at 21:55
Ah, the classic problem of using `:nth-child()` with classes. Will you have an arbitrary number of `.sub-comment` items (i.e. not just 2)? — BoltClock, Mar 23 '12 at 22:01

score 3 · Accepted Answer · edited May 23 '17 at 11:50

:nth-child() doesn't filter by classes or anything. In your code, your first ul.sub-comment isn't the very first child in #comments-wrapper, so it doesn't work.

Instead, use this selector technique and invert your height and margin-top styles as follows:

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 ul.sub-comment elements after the first one.

Updated fiddle (also inverted the background-color styles so the first one remains blue)

score 0 · Answer 2 · answered Aug 17 '23 at 21:10

0

Use :: for pseudo before and after elements

article div#comments-wrapper ul.sub-comment:nth-child(1)::before {
    height:37px;
    margin-top:-6px;
}

answered Aug 17 '23 at 21:10

Ngọc Tú Đặng

1

nth-child and before

2 Answers2