Need to remove border from last comment in nested comments

This driving me nuts!
Can anyone see what I'm missing in order to remove the border from the bottom of comment Depth 10?
I've tried using :last-child and :last-of-type to no avail. I want the last comment to always lose the border.

http://sandbox.intrepidrealist.com/eye-specialist-sb/template-comments/

Thanks!
LVL 9
Alicia St RoseOwner & Principle Developer/DesignerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
This should do it ....

.comment-list li ol.children li.comment:last-child article {
  border-bottom: 0;
}

Open in new window

Make sure you add this after the border-bottom declaration for the article.
0
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
I've added the code. I thought that would work too. But it doesn't. And when I look in Chrome Inspect Elem I don't even see the CSS for last-child. So, I'm lead to believe somehow this isn't the last-child. But it looks like it!
I even tried last-of-type. Not working.
0
Julian HansenCommented:
I added that code directly into firebug and it does work.

Where abouts did you insert it - is the link you posted linked to the stylesheet with the change?

Can't see where you have added it.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
I was uploading remotely and it looks like my connection wasn't working.
The code is there now. But the border is now missing from all of the nested posts and not just the last one. This is why last child isn't working for me.

If you look at the post with depth 1, which has down to depth 10 under it, I need a border under each article except the last one.

I think the clue is in the markup. But my brain is about to explode figuring it out.
0
GaryCommented:
Correction to Julians code

.comment-list li:last-child {
  border-bottom: 0;
}

Open in new window

0
Julian HansenCommented:
@Gary, not sure about that - working on the following
styles.css 1159
.comment-list li ol.children li.comment article {
  border-bottom: 1px solid #d9e5f2;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

Open in new window

Article is given the border bottom ....
0
GaryCommented:
Site I'm looking at the LI has the border and is a child of .comment-list but...

...the html is mightily screwed up with misplaced tags (and footer tags everywhere?) and FF is trying to fix it.

So that needs to be fixed first.
0
Julian HansenCommented:
Ok I see the problem - you have nested lists so li:last-child is being evaluated at different levels.

What you need to do is to assign the border only to immediate children that have the parent class so delete style at 1164 and then change styles.css line 1159 to

li.comment, li.pingback, li.comment.depth-1.parent > article {
  border-bottom: 2px solid #d9e5f2;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

Open in new window


On line 1148 change to
li.comment.depth-1.parent > article {
    border-width: 1px;
}

Open in new window

And on line 1141 change to

li.comment, li.pingback, li.comment.depth-1.parent  > article {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #D9E5F2;
}

Open in new window

Basically what you need to do is to ensure that a border style is applied to only the immediate child article elements of li elements with the class parent.

EDIT: Just noticed 1141 and 1159 - same style - trying to eyeball this in FireBug but it gets screwy when you change the styles - follow the rule of making the border only apply to
li.parent > article  i.e. immediate article children of li.parent.
0
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
The top level li's have a 2px border, the nested  comments (articles) have 1px border. Each article has a footer for post meta etc.

I'm using underscores Wordpress starter theme and that was the markup for comments. I could change it, but I think it's following HTML5 article format.
0
GaryCommented:
Ah you're right Julian was looking at the wrong one.
(HTML still needs to be fixed)
0
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
@julianH,
I'm confused why I'm replacing the same declarations twice?
At any rate, I tried this and all borders have disappeared.

I'm really trying to target the nested comments under the parent article with a 1px border. 2px border separates top level comments.
0
Julian HansenCommented:
I could change it, but I think it's following HTML5 article format.
Not sure what you mean - but if you want the last article to not have a bottom border - you will need to do what I suggested above - apply the border only to li elements that have a parent class. To do that the border-bottom style must only be applied to immediate child article elements of li.parent.
0
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
@Gary I'm not sure what needs to be fixed in the HTML. I validated the page and got the green light.
Can you head me in the right direction?

Thanks!
0
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
@julianH,
The code you gave me isn't targeting the correct article. I want to target the article (comment depth 10). I applied your code and I lost the margins and padding on those nested comments and didn't see a border on any of them.

I need a border on all nested comments except the last one.

You've also said to replace code with this

li.comment, li.pingback, li.comment.depth-1.parent > article {
  border-bottom: 2px solid #d9e5f2;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

Open in new window

and this:
li.comment, li.pingback, li.comment.depth-1.parent  > article {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #D9E5F2;
}

Open in new window


they appear to be exactly the same.
0
Julian HansenCommented:
"they appear to be exactly the same."
Refer the edit at the bottom of that post

Regarding loosing the margin - I could re-write all the css for you but the post was meant to illustrate the point. The problem is caused by the fact that the border is applied to all children of li.comment elements and as this is a nested list with multiple li.comment parents the last-child solution is not going to work - you have to turn it around and apply the border to only  the elements that have the class parent.

What I provided was a quick fix illustration - to preserve the margin and padding you need to take the border out of the original style on 1159 and 1148 and create new styles with the li.comment > article fix suggested above. That way the margin and padding will still apply to all article elements and only the parent elements will get a border.

So going back to the original on line 1159 - remove the border-bottom

li.comment, li.pingback, li.comment.depth-1.parent  article {
  margin-bottom: 20px;
  padding-bottom: 10px;
}

Open in new window


Change 1141 to
li.comment, li.pingback, li.comment.depth-1.parent > article {
  border-bottom: 2px solid #d9e5f2;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

Open in new window

Change 1148 to
li.comment.depth-1.parent > article {
  border-width: 1px;
}

Open in new window


Delete style you added on 1164

Add this after 1159
.comment-list li ol.children li.comment.parent > article {
  border:  1px solid #d9e5f2;
}

Open in new window

If you need to add border-bottom back to other instances where it has now disappeared as a result of the above changes then target those directly with the immediate '>' operator.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Bloody Hell!
This worked. The only border that disappeared was the bottom one!
Thank you so much!

I'm definitely going to acquaint myself with the '>' operator.
0
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Thank you so much!
0
Julian HansenCommented:
You are welcome - thanks for the points.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.