torazuka/ancestor-parent.html

## ancestor-parent.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>ancestorとparentをCSS適用して比較する</title>
        <script type="text/javascript" src="../scripts/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#yamabuki").click(function() {
                    $("#ancestor span.hoge").css("background-color", "#d5851c");
                    $("#ancestor span.moga").css("background-color", "#ffef20");
                });
                $("#kakitsubata").click(function() {
                    $("#ancestor span.hoge").css("background-color", "#8fc947");
                    $("#ancestor span.moga").css("background-color", "#fcbec1");
                });
                $("#tsukikusa").click(function() {
                    $("#parent > span.hoge").css("background-color", "#356e8d");
                    $("#parent > span.moga").css("background-color", "#679d9f");
                });
                $("#kareiro").click(function() {
                    $("#parent > span.hoge").css("background-color", "#bd982c");
                    $("#parent > span.moga").css("background-color", "#2d5434");
                });
            });
        </script>
    </head>
    <body>
        <h1>ancestorとparentをCSS適用して比較する</h1>
        <p>ボタンを押すと文字列の背景色が変わる。（配色参考：http://www.color-sample.com/）</p>
        <h2>ancestor-descendant</h2>
        <div id="ancestor">
            <span class="hoge">divの中にspan.hoge</span><span class="moga">divの中にspan.moga</span></span><br/>
            <div><span class="hoge">さらにdivの中にspan.hoge</span></div>
        </div>
        <button type="button" id="yamabuki">山吹</button>
        <button type="button" id="kakitsubata">杜若</button>
        <h2>テスト1</h2>
        <p>先祖、子孫の関係の場合、divとspanの間が隔たっていてもok。</p>
        <h2>parent-child</h2>
        <div id="parent">
            <span class="hoge">divの中にspan.hoge</span><span class="moga">divの中にspan.moga</span></span><br/>
            <div><span class="hoge">さらにdivの中にspan.hoge</span></div>
        </div>
        <button type="button" id="tsukikusa">鴨頭草</button>
        <button type="button" id="kareiro">枯色</button>
        <h2>テスト2</h2>
        <p>親、子の場合、divとspanの間が隔たっているとダメ。</p>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>ancestorとparentをCSS適用して比較する</title>
	<script type="text/javascript" src="../scripts/jquery.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
	$("#yamabuki").click(function() {
	$("#ancestor span.hoge").css("background-color", "#d5851c");
	$("#ancestor span.moga").css("background-color", "#ffef20");
	});
	$("#kakitsubata").click(function() {
	$("#ancestor span.hoge").css("background-color", "#8fc947");
	$("#ancestor span.moga").css("background-color", "#fcbec1");
	});
	$("#tsukikusa").click(function() {
	$("#parent > span.hoge").css("background-color", "#356e8d");
	$("#parent > span.moga").css("background-color", "#679d9f");
	});
	$("#kareiro").click(function() {
	$("#parent > span.hoge").css("background-color", "#bd982c");
	$("#parent > span.moga").css("background-color", "#2d5434");
	});
	});
	</script>
	</head>
	<body>
	<h1>ancestorとparentをCSS適用して比較する</h1>
	<p>ボタンを押すと文字列の背景色が変わる。（配色参考：http://www.color-sample.com/）</p>
	<h2>ancestor-descendant</h2>
	<div id="ancestor">
	<span class="hoge">divの中にspan.hoge</span><span class="moga">divの中にspan.moga</span></span><br/>
	<div><span class="hoge">さらにdivの中にspan.hoge</span></div>
	</div>
	<button type="button" id="yamabuki">山吹</button>
	<button type="button" id="kakitsubata">杜若</button>
	<h2>テスト1</h2>
	<p>先祖、子孫の関係の場合、divとspanの間が隔たっていてもok。</p>
	<h2>parent-child</h2>
	<div id="parent">
	<span class="hoge">divの中にspan.hoge</span><span class="moga">divの中にspan.moga</span></span><br/>
	<div><span class="hoge">さらにdivの中にspan.hoge</span></div>
	</div>
	<button type="button" id="tsukikusa">鴨頭草</button>
	<button type="button" id="kareiro">枯色</button>
	<h2>テスト2</h2>
	<p>親、子の場合、divとspanの間が隔たっているとダメ。</p>
	</body>
	</html>