Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by John Weland
John Weland
42,478 Points

finding last element matching other element

So I am back with more table shenanigans. I have a table which lays out like so 

<tbody>
    <tr data-tt-id="a-" >...</tr>
    <tr data-tt-id="a-xxx1" data-tt-parent-id="a-">...</tr>
    <tr data-tt-id="a-xxx2" data-tt-parent-id="a-">...</tr>
    <tr data-tt-id="a-xxx3" data-tt-parent-id="a-">...</tr>
    <tr data-tt-id="a-xxx4" data-tt-parent-id="a-">...</tr>

    <tr data-tt-id="b-" >...</tr>
    <tr data-tt-id="b-xxx1" data-tt-parent-id="b-">...</tr>
    <tr data-tt-id="b-xxx2" data-tt-parent-id="b-">...</tr>
    <tr data-tt-id="b-xxx3" data-tt-parent-id="b-">...</tr>
    <tr data-tt-id="b-xxx4" data-tt-parent-id="b-">...</tr>
</tbody>

I need to be able to something like

for each data-tt-id select the last tr of each group where data-tt-parent-id == data-tt-id. apply css.

the goal is to get a slightly heavier bottom border on the last of each set so as to help aid in discerning the end of a given group.

I am having trouble thinking my way through it. So any help is appreciated.

1 Answer

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Or you could do it in CSS by applying a heavier top border on any item with a data-tt-id ending in a hyphen ( - ), except for the first tr tag, and then also apply it to the very last one, assuming you want it to also have the heavier bottom border.

Something like this:

/* need this to style the rows directly */
table {
  border-collapse: collapse;
}

/* style the regular rows, all sides */
[data-tt-id] {
  border: 1px solid gainsboro;
}

/* add the heavier bottom border to the very last row */
[data-tt-id]:last-child {
  border-bottom: 3px solid dimgrey;
}

/* add the heavier top border to any row with a data-tt-id ending in the hyphen */
[data-tt-id$="-"] {
  border-top: 3px solid dimgrey;
}

/* reset the first row to the same as the regular rows */
[data-tt-id$="-"]:first-child {
  border: 1px solid gainsboro;
}
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

CodePen example: http://codepen.io/iainsimmons/pen/Nqemqz