Solved

Need to remove border from last comment in nested comments

Posted on 2014-09-29
18
126 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
  • 8
  • 7
  • 3
18 Comments
 
LVL 51

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 7

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 51

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
 
LVL 7

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 51

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 51

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 7

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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
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 7

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 51

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 7

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 7

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 51

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 7

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 7

Author Closing Comment

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

Expert Comment

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

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

708 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now