how to select span within div

Question

How to select span within div one by one? like first I want to target span1 then 2 and so on

<div class="key" id="chain">
<span></span>
<span></span>
<span></span>
</div>

Answer 1

var spans = document.getElementById("chain").getElementsByTagName("span");

for(var a = 0; a < spans.length; a++) {
var target = spans[a];
target.innerHTML = a;
}

Answer 2

Maybe try and look up for Jquery if you want to do it in Javascript
In css you can refer to it as:
span {
....
}
This means you will effect all spans in the document!!

Answer 3

With css selectors, you can target each <span> direct childs of a specific element by:

#chain > span:nth-child(n)

... where n is the index (started at 1) of yours spans.

'>' operator is required to target only direct childs, else you could select also deeper childs:

#chain span:nth-child(2) { color:red; }

with:

<div id="chain">
<span>I'm not styled</span>
<span>I'm red</span>
<p>
<span>I'm not styled</span>
<span>I'm red also as I'm second child of p which is child of #chain</span>
</p>
</div>

You could also use ':first-child', ':last-child' for first and last child, and also look at specificity of ':first-of-type', ':last-of-type', and 'nth-of-type(n)'...

Answer 4

$('#chain .key span')[0] will be selected first element . it's array.

Answer 5

<div id="chain">
<span>Practicando</span>
</div>