Webデザインのこと、いろいろ

Webデザインにまつわることを自分用にメモしています。

jQuery：基本２

jQuery

11　only-child擬似クラス
セレクタに特定の要素が１つだけ含まれる場合
jQueryの練習 - p38：完成版にリンク

<script>
$(document).ready(function(){
	$('li span:only-child').css('color','coral');
});
</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second"><span>Java</span>Script</li>
<li id="third">jQuery</li>
<li id="fourth">Action<span>Script</span></li>
<li id="fifth">PHP+MySQL</li>
</ul>
</body>

12　nth-last-child擬似クラス
セレクタに指定した要素で、後ろから数えて指定した順番にある要素を指定できます。
jQueryの練習 - p38：完成版にリンク

<script>
$(document).ready(function(){
	$('li:nth-last-child(3)').css('color','coral');
});
</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second"><span>Java</span>Script</li>
<li id="third">jQuery</li>
<li id="fourth">Action<span>Script</span></li>
<li id="fifth">PHP+MySQL</li>
</ul>
</body>

13　nth-of-type擬似クラス
セレクタに指定した要素で、指定した順番にある要素を選択できます。
jQueryの練習 - p39：完成版にリンク

<script>
$(document).ready(function(){
	$('dt:nth-of-type(2)').css('color','coral');
});
</script>
</head>

<body>
<dl>
<dt>HTML5+CSS3</dt>
<dd><span>Java</span>Script</dd>
<dt>jQuery</dt>
<dd>Action<span>Script</span></dd>
<dt>PHP+MySQL</dt>
<dd>Action<span>Script</span></dd>
</dl>
</dl>
</body>

14　nth-last-of-type擬似クラス
セレクタに指定した要素で、後ろから数えて指定した順番にあたる要素を選択できます。
jQueryの練習 - p40：完成版にリンク

<script>
$(document).ready(function(){
	$('dt:nth-last-of-type(2)').css('color','coral');
});
</script>
</head>

<body>
<dl>
<dt>HTML5+CSS3</dt>
<dd><span>Java</span>Script</dd>
<dt>jQuery</dt>
<dd>Action<span>Script</span></dd>
<dt>PHP+MySQL</dt>
<dd>Action<span>Script</span></dd>
<dt>HTML5+CSS3</dt>
<dd><span>Java</span>Script</dd>
<dt>jQuery</dt>
<dd>Action<span>Script</span></dd>
<dt>PHP+MySQL</dt>
<dd>Action<span>Script</span></dd>
</dl>
</body>

15　first-of-type擬似クラス
セレクタに指定した要素で、最初にあたる要素を選択できます。
jQueryの練習 - p41：完成版にリンク

<script>
$(document).ready(function(){
	$('dd:first-of-type').css('color','coral');
});
</script>
</head>

<body>
<dl>
<dt>HTML5+CSS3</dt>
<dd><span>Java</span>Script</dd>
<dt>jQuery</dt>
<dd>Action<span>Script</span></dd>
<dt>PHP+MySQL</dt>
<dd>Action<span>Script</span></dd>
<dt>HTML5+CSS3</dt>
<dd><span>Java</span>Script</dd>
<dt>jQuery</dt>
<dd>Action<span>Script</span></dd>
<dt>PHP+MySQL</dt>
<dd>Action<span>Script</span></dd>
</dl>
</body>

16　last-of-type擬似クラス
セレクタに指定した要素で、最後にあたる要素を選択できます。
jQueryの練習 - p41：完成版にリンク

<script>
$(document).ready(function(){
	$('dt:last-of-type').css('color','coral');
});
</script>
</head>

<body>
<dl>
<dt>HTML5+CSS3</dt>
<dd><span>Java</span>Script</dd>
<dt>jQuery</dt>
<dd>Action<span>Script</span></dd>
<dt>PHP+MySQL</dt>
<dd>Action<span>Script</span></dd>
<dt>HTML5+CSS3</dt>
<dd><span>Java</span>Script</dd>
<dt>jQuery</dt>
<dd>Action<span>Script</span></dd>
<dt>PHP+MySQL</dt>
<dd>Action<span>Script</span></dd>
</dl>
</body>

17　only-of-type擬似クラス
セレクタに指定した要素で、最後にあたる要素を選択できます。
※ddは複数存在するので青くならない。
jQueryの練習 - p41：完成版にリンク

<script>
$(document).ready(function(){
	$('dt:only-of-type').css('color','coral');
	$('dd:only-of-type').css('color','blue');
});
</script>
</head>

<body>
<dl>
<dt>HTML5+CSS3</dt>
<dd><span>Java</span>Script</dd>
<dd>Action<span>Script</span></dd>
<dd>Action<span>Script</span></dd>
<dd><span>Java</span>Script</dd>
<dd>Action<span>Script</span></dd>
<dd>Action<span>Script</span></dd>
</dl>
</body>

18　lang擬似クラス
lang属性から要素を選択できる。
jQueryの練習 - p43：完成版にリンク

<script>
$(document).ready(function(){
	$(':lang(ja)').css('color','coral');
	$(':lang(en)').css('color','blue');
	$(':lang(en-es)').css('color','aqua');
});
</script>
</head>

<body>
<ul>
<li lang="ja">どんどこどんどこどんどこどんどこ</li>
<li lang="en">どんどこどんどこどんどこどんどこ</li>
<li lang="en-es">どんどこどんどこどんどこどんどこ</li>
<li lang="en-us">どんどこどんどこどんどこどんどこ</li>
<li lang="ja">どんどこどんどこどんどこどんどこ</li>
</ul>
</body>

19　[attribute]
特定の属性を持つ要素を選択できるセレクターです。
jQueryの練習 - p44~属性セレクタ：完成版にリンク

<script>
$(document).ready(function(){
	$('[id]').css('color','coral');
});
</script>
</head>

<body>
<ul>
<li id="first">どんどこどんどこどんどこどんどこ</li>
<li class="second">どんどこどんどこどんどこどんどこ</li>
<li id="third">どんどこどんどこどんどこどんどこ</li>
<li class="fourth">どんどこどんどこどんどこどんどこ</li>
</ul>
</body>

20　[attribute='value']
特定の属性が、特定の値を持つ要素を選択できるセレクターです。
jQueryの練習 - p44~属性セレクタ：完成版にリンク

<script>
$(document).ready(function(){
	$("[title='second']").css('color','coral');
});
</script>
</head>

<body>
<ul>
<li title="first">どんどこどんどこどんどこどんどこ</li>
<li title="second">どんどこどんどこどんどこどんどこ</li>
<li title="third">どんどこどんどこどんどこどんどこ</li>
<li title="fourth">どんどこどんどこどんどこどんどこ</li>
</ul>
</body>