Skip to content

Instantly share code, notes, and snippets.

@torazuka

torazuka/ancestor-parent.html

Created November 27, 2010 09:17
Show Gist options
  • Save torazuka/717733 to your computer and use it in GitHub Desktop.
Save torazuka/717733 to your computer and use it in GitHub Desktop.
Download ZIP
ancestorとparentをCSS適用して比較する
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment