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 Loops, Arrays and Objects Simplify Repetitive Tasks with Loops For Loops

maya sophie
maya sophie
5,754 Points
Posted by maya sophie
maya sophie
5,754 Points

about div and how did appeared here

I don't see any div in the html code.....where did div came from? I checked css properties and I see a #color div but how div get attached to html code???? the body is the div? or ??? thx

2 Answers

Robbie Thomas
Robbie Thomas
31,093 Points
Robbie Thomas
Robbie Thomas
31,093 Points

If it answers your question, the "#" in color is an ID.

Since no other div's are selected in the code, the javascript produces those gray circles with the numbers in them.

Hopefully, I'm making sense here, if not, I'd imagine someone else better than me will comment below.

Tom Stringer
PLUS
Tom Stringer
Courses Plus Student 1,709 Points
Tom Stringer
Tom Stringer
Courses Plus Student 1,709 Points

Hi Maya,

As Robbie alluded to above - the # you see in the CSS is a selector

In this case, the hash (#) is used to select HTML entities that have an ID matching that value, so in this case #color that we see in the CSS is saying "Select any entity that has the ID of 'color' in the HTML and apply the following styles".

Furthermore in the CSS the full rule is actually #color div. This is "scoped" more specifically to select any <div> element within an element that has an ID of "color".

So it would pick up/match

<div id="color"> <!-- Doesn't match this -->
<div>Matches on me!</div>
</div> <!-- Also doesn't match on me -->

But wouldn't match

<div id="color"> </div>

In this way CSS can be used to target very specific things, or very broad-ranges of items. It also makes more sense with the naming as it is called "Cascading Style Sheets" Because as you get more specific with the selectors, they will overwrite more "broad" selectors that have already been written.

The actual <div> itself is being created in the javascript

The javascript can be run from anywhere in the HTML. If you look in to video at the 4:10 mark or so, you'll see they're popping it in to the <body> of the HTML, which means the script that they write is being run (and the HTML is then being generated in a loop) in the body of the HTML.

This wouldn't work if placed in the <head> of the document (reserved for metadata)

I suggest doing a quick course on CSS to get familiar with the scoping and possibilities!