a way to access and style last child elements with d3 and DOM web api

lastChild.js

// a workaround to apply style properties to only one element of a collection of elements in a d3 selection
d3.select('.container-div')
    .selectAll('div')
    .data(data)
 .enter().append('div')
    .attr('class', 'contained-divs')
    // show last child element on hover
    .on('mouseover', function(d) {
      var s = d3.select(this)[0][0],
          s0 = s.lastChild;
      s0.style.opacity = 1;
    })
    .on('mouseout', function(d) {
      var s = d3.select(this)[0][0],
          s0 = s.lastChild;
      s0.style.opacity = 0;
    });

// create a child element    
d3.selectAll('.contained-divs')
   .append('div')
   .attr('class', 'first-child');

// create a last child element   
d3.selectAll('.contained-divs')
    .append('div')
    .attr('class', 'last-child');