Solved

Need to remove border from last comment in nested comments

Posted on 2014-09-29
18
135 Views
Last Modified: 2014-10-01
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!
0
Comment
Question by:Alicia St Rose
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
  • 3
18 Comments
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 40351598
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
 
LVL 8

Author Comment

by:Alicia St Rose
ID: 40352702
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
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 40353095
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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 
LVL 8

Author Comment

by:Alicia St Rose
ID: 40353233
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
 
LVL 58

Expert Comment

by:Gary
ID: 40353366
Correction to Julians code

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

Open in new window

0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 40353542
@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
 
LVL 58

Expert Comment

by:Gary
ID: 40353555
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
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 40353577
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
 
LVL 8

Author Comment

by:Alicia St Rose
ID: 40353581
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
 
LVL 58

Expert Comment

by:Gary
ID: 40353585
Ah you're right Julian was looking at the wrong one.
(HTML still needs to be fixed)
0
 
LVL 8

Author Comment

by:Alicia St Rose
ID: 40353604
@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
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 40353605
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
 
LVL 8

Author Comment

by:Alicia St Rose
ID: 40353609
@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
 
LVL 8

Author Comment

by:Alicia St Rose
ID: 40353621
@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
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40353642
"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
 
LVL 8

Author Comment

by:Alicia St Rose
ID: 40355605
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
 
LVL 8

Author Closing Comment

by:Alicia St Rose
ID: 40355607
Thank you so much!
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 40355653
You are welcome - thanks for the points.
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question