CODEWITHSUNDEEP
csscss-selectors
Farnabaz
Farnabaz

Reputation: 4066

How do I use css last-child?

I have a list of comments and I want to set the border-radius of the last child using some css code comment divs like this comment form
i'm using this code but it doesn't work. 

 #comments>.comment:last-child, .indented>.comment:last-child{border-bottom-right-radius: 5px;}

it works when using with jquery like this 

 $('#comments>.comment:last, .indented>.comment:last').css('border-bottom-right-radius', '10px');

but i want to solve it using css code.Any suggestions?

fiddle for simple code Fiddle

Upvotes: 4

Views: 183

Answers (2)

NullPoiиteя
NullPoiиteя

Reputation: 57312

Your HTML structure has flaws so the alternative solution is add right_bottom_round class where you want the right bottom rounded.

.right_bottom_round {
  border-bottom-right-radius: 5px !important;
}

and check the browser compatibility here

Upvotes: 1

Šime Vidas
Šime Vidas

Reputation: 185893

I've been able to make it work (for the provided HTML structure) with this CSS code:

#comments > .comment:nth-last-child(-n+2),
.indented > .comment:nth-last-child(-n+2) {
    border-bottom-right-radius: 15px;
}

Live demo: http://jsfiddle.net/93tZV/3/

So, instead of using :last-child to select the last child, we use :nth-last-child(-n+2) to select the last two children. This works if the last child is an .indented DIV, since our .comment selector will filter it out. However, if both last children are .comment DIVs, the CSS styles will apply to both of them, which results in http://jsfiddle.net/93tZV/4/ I don't know how to fix this.

Upvotes: 2

Related Questions