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 JavaScript Objects Loop Through Objects Display an Array of Objects on the Page – One Solution

Posted by pegamoose
pegamoose
16,046 Points

Where are the horizontal divider bars between the pets coming from in the final display?

I see the final output has horizontal divider bars between each of the pets and their data, but where is this coming from?

1 Answer

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

The CSS adds a thin border line over the top of each pet's name (which is displayed as an h2 element):

h2:not(:first-of-type ) {
  border-top: solid 1px rgba(0, 0, 0, 0.15);    /* this makes the line */
  padding-top: 34px;
}

There's a similar CSS rule to add a line below the main title.

Armend Azemi
Armend Azemi
27,921 Points
Armend Azemi
Armend Azemi
27,921 Points

Another thing to point out is that there will NOT be a line above the first h2 element.

So, for each h2 element, there will be a 1px line above it, as shown in the code snippet provided. But, take notice that it says h2:not(:first-of-type), meaning that this rule will not apply to the FIRST h2 element, only to the rest of them. This is because we already have a line under the h1 element, which says Pet Directory, and we don't want two 'dividing' lines next to each other.