I'm trying to select the first child of a parent element with pure JavaScript and change some of it's CSS properties. I've tried .firstChild and .childNodes[1] methods but they do not work. This can be done with CSS nth-child() selector but I would like to do it with JavaScript for better browser support.

Example:

HTML

    <div class="daddy">
       <div class="child">I want select this child and change it's css property.</div>
       <div class="child"></div>
       <div class="child"></div>
       <div class="child"></div>
    </div>

What I've tried:

JavaScript

    var x = document.getElementsByClassName('daddy');
    var d = x.firstChild; // and the x.childNodes[1]
    d.style.width="5em";

What works:

CSS

   daddy:nth-child(1) { width: 5em; }

Any help will be appreciated.

I'm trying to select the first child of a parent element with pure JavaScript and change some of it's CSS properties. I've tried .firstChild and .childNodes[1] methods but they do not work. This can be done with CSS nth-child() selector but I would like to do it with JavaScript for better browser support.

Example:

HTML

    <div class="daddy">
       <div class="child">I want select this child and change it's css property.</div>
       <div class="child"></div>
       <div class="child"></div>
       <div class="child"></div>
    </div>

What I've tried:

JavaScript

    var x = document.getElementsByClassName('daddy');
    var d = x.firstChild; // and the x.childNodes[1]
    d.style.width="5em";

What works:

CSS

   daddy:nth-child(1) { width: 5em; }

Any help will be appreciated.

• javascript
• html
• css

• Have you tried .daddy .child:first-child { width: 5em; }? Because that's supported in every browser (albeit only in IE from version 7). – David Thomas Commented Oct 10, 2014 at 21:43
• Yes I have and it does work but I want to do this JavaScript only. – basitmate Commented Oct 10, 2014 at 21:54

5 Answers 5

Two problems:

1. getElementsByClassName returns an array-like object. You need to select the first element in the list.
2. firstChild and childNodes will return text nodes, not just elements. Use .children to access elements only:

var x = document.getElementsByClassName('daddy');
var d = x[0].children[0];
d.style.width="5em";

<div class="daddy">
  <div class="child">I want to select this child and change its css property.</div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

var x = document.getElementsByClassName('daddy');
var d = x[0].children[0];
d.style.width = '5em';

Or if you had multiple daddy elements you could do

var x = document.getElementsByClassName('daddy');

[].forEach.call(x, function(d) {
    d.children[0].style.width = '5em';
});

for better browser support as you asked you can use pure CSS by using :first-child selector, since it is cross-browser and it is CSS 2.1, please see this link here and the table below that illustrates the browser support :

so here is a snippet with CSS ONLY:

.child:first-child {
  /*whatever CSS you want here --
  just fot visualization and snippet :*/
  background-color: red;
  color: white;
}

<div class="daddy">
  <div class="child">I want select this child and change it's css property.</div>
  <div class="child">child 2</div>
  <div class="child">child 3</div>
  <div class="child">child 4</div>
</div>

getElementsByClassName returns a nodeList, it doesn't have firstChild or childNodes property, you should get the elements of the collection and then use those properties, i.e. x[index].

var x = document.getElementsByClassName('daddy'), i = 0, j;

for (; i < x.length; i++) {
    e = x[i].childNodes;
    for (j = 0; j < e.length; j++) {
        if (e[j].nodeType === 1) {
            e[j].style.width = '5em';
            break;
        }
    }
}

Please note that only newer browsers(including IE9) support the getElementsByClassName method. If you want to support the older browsers you should either shim the method or use an alternative function. Answers of this question provide several solutions.

As an alternative you can also use the querySelectorAll method:

[].slice.call(document.querySelectorAll('.daddy > .child:first-child'))
        .forEach(function(e) {
            e.style.width = '5em';
        });

IMO you should be using this: .daddy > .child

The difference between the standard X Y and X > Y is that the latter will only select direct children.

Please refer to this:

• http://code.tutsplus./tutorials/the-30-css-selectors-you-must-memorize--net-16048