emchateau/hasChild selector with JS

## hasChild selector with JS
<!DOCTYPE html>
<html>
  <head>
<meta name="description" content="hasChild selector with JS">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  <style id="jsbin-css">
.color {
  color:red;
}
</style>
</head>
  <body>
    <button onclick="hasChild()">change color</button>
    <div id="title">
      <h1>This is a h1 element.</span>
    </div>
    <div class="solo">
      <span>This is a span element.</span>
    </div>
    <div class="solo">
      <span class="span">This is a span we want red on click.</span>
    </div>
    <div class="group">
      <span>This is a span element.</span>
    </div>
  <script id="jsbin-javascript">
function hasChild() {
  var element = document.querySelectorAll('div.solo');
  for (var i = 0; i < element.length; i++) {
    if (element[i].querySelectorAll('span.span').length > 0) {
      element[i].classList.add('color');
    }
  }
}
</script>


<script id="jsbin-source-css" type="text/css">.color {
  color:red;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">function hasChild() {
  var element = document.querySelectorAll('div.solo');
  for (var i = 0; i < element.length; i++) {
    if (element[i].querySelectorAll('span.span').length > 0) {
      element[i].classList.add('color');
    }
  }
}</script></body>
</html>

## jsbin.tehijot.css
.color {
  color:red;
}

## jsbin.tehijot.js
function hasChild() {
  var element = document.querySelectorAll('div.solo');
  for (var i = 0; i < element.length; i++) {
    if (element[i].querySelectorAll('span.span').length > 0) {
      element[i].classList.add('color');
    }
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="hasChild selector with JS">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.color {
	color:red;
	}
	</style>
	</head>
	<body>
	<button onclick="hasChild()">change color</button>
	<div id="title">
	<h1>This is a h1 element.</span>
	</div>
	<div class="solo">
	<span>This is a span element.</span>
	</div>
	<div class="solo">
	<span class="span">This is a span we want red on click.</span>
	</div>
	<div class="group">
	<span>This is a span element.</span>
	</div>
	<script id="jsbin-javascript">
	function hasChild() {
	var element = document.querySelectorAll('div.solo');
	for (var i = 0; i < element.length; i++) {
	if (element[i].querySelectorAll('span.span').length > 0) {
	element[i].classList.add('color');
	}
	}
	}
	</script>


	<script id="jsbin-source-css" type="text/css">.color {
	color:red;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">function hasChild() {
	var element = document.querySelectorAll('div.solo');
	for (var i = 0; i < element.length; i++) {
	if (element[i].querySelectorAll('span.span').length > 0) {
	element[i].classList.add('color');
	}
	}
	}</script></body>
	</html>