CODEWITHSUNDEEP
javascriptcsshtml
hedgesketch
hedgesketch

Reputation: 197

nth child not working with within body

I'm trying to draw a 6x6 grid with divs, but when I create them with javascript and css, it doesn't show as expected.

css:

div{
    width:30px;
    height:30px;
    margin:0px;
    border:1px solid black;
    float:left;
}
div:nth-child(6n+1){
    clear:both;
}

javascript:

for(var i=0; i<36; i++){
    document.body.appendChild(document.createElement('div'));
}

https://jsfiddle.net/kqzhorq0/

The above link demonstrates what I see in the browser.

But, when I select onload or onDomReady settings in jsfiddle, the grid shows as expected.

How can I get the grid to show properly using onload or onDomReady, and why isn't it showing properly without it?

Upvotes: 3

Views: 336

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388446

The problem here, the first child of the body in the fiddle is the script element. You can inspect the html of the result panel to see the script element.

The nth-child will consider all the elements while using the index to search for an element, but using nth-of-type you can search for a particular type.

One choice is to use the :nth-of-type selector as below

div {
    width:30px;
    height:30px;
    margin:0px;
    border:1px solid black;
    float:left;
}
div:nth-of-type(6n+1) {
    clear:both;
}

Demo: Fiddle

Another is to insert the divs before the script like

for (var i = 0; i < 36; i++) {
    document.body.insertBefore(document.createElement('div'), document.body.firstChild);
}

Demo: Fiddle

But a better solution will be use a custom container element instead of the body element

var ct = document.getElementById('container');
for (var i = 0; i < 36; i++) {
    ct.appendChild(document.createElement('div'));
}

then

#container > div {
    width:30px;
    height:30px;
    margin:0px;
    border:1px solid black;
    float:left;
}
#container div:nth-child(6n+1) {
    clear:both;
}

Demo: Fiddle

Upvotes: 1

xengravity
xengravity

Reputation: 3589

If you can wrap your divs in a container and specify your selectors to target from within the container your code will work.

Here is a working snippet:

for(var i=0; i<36; i++){
    document.getElementById("foo").appendChild(document.createElement('div'));
}
#foo div{
  width:30px;
  height:30px;
  margin:0px;
  border:1px solid black;
  float:left;
}

#foo div:nth-child(6n+1){
  clear:both;
}
<div id="foo"></div>

I also created an interactive demo on nth-child to help explain it further: http://xengravity.com/demo/nth-child/

Upvotes: 3

Related Questions