jQuery cssのセレクター一覧
jQuery cssのセレクター一覧 を記載したいと思います。
【復習】
- $(function(){
$('※※').css('○○','○○');
});
- セレクター＝※※部分
CSSでよく利用されるセレクター
→ 例）$(’li’).css('○○','○○')
→例）$(’#自分が付けたID名’).css('○○','○○')
→例）$(’.自分が付けたクラス名’).css('○○','○○')
→例）$(’.自分が付けたクラス名等 strong等’).css('○○','○○')
注意）セレクターは , で区切らない
→例） $('li*').css('○○','○○')
→例 $('#自分が付けたID名等 strong等,#自分が付けたID名等 strong等').css('○○','○○');
注意）セレクターは , で区切る
CSS2.1のセレクター
→例） $(’li＞strong’).css(○○,○○) ・・・ li の中の strong の意
→例） $(’自分が付けたID名等＋li’).css(○○,○○) ・・・ ’自分が付けたID名行 の次の li の意
- first-child疑似クラス $(’要素:first-child’).css(○○,○○)
→例） $(’li：first-child’).css(○○,○○) ・・・ ’複数の ul が有った場合の それぞれの最初の li の行
CSS3のセレクター
→例） $(’#second～li’).css(○○,○○) ・・・idを設定したliの second以降の全て
- 否定疑似クラス $(’要素1:not(要素2)’).css(○○,○○)
→例） $(’li:not(first-child)’).css(○○,○○) ・・・liの一行目以外全て
【このように表示するには】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習P28</title>
<script src="jquery-1.11.0.min.js"></script>
<script>
//jQeryの命令をここに記述
$(function(){
$('li').css('color','blue'); 要素セレクター
$('#first').css('color','red'); IDセレクター
$('.second').css('color','green'); .classセレクター
$('#first strong,#third strong').css('color','orange'); 子孫セレクター＆グループセレクター
$('li>strong').css('color','yellowgreen'); 子セレクター
$('#third+li').css('color','pink'); 隣接セレクター
$('li:first-child').css('color','blue'); 疑似クラス
//#third+li' のとなり クリックされた時の隣 という指定の仕方
//('#first strong,#third strong')は一つの命令なので、区切らない。
//$('#first strong,#third strong').css('color','orange');は$('li>strong').css('color','yellowgreen');によって上書きされている
});
</script>
</head>
<body>
<h1>jQueryの練習</h1>
<ul>
<li id="first">いぬいぬ<strong>いぬ</strong>いぬ</li>
<li class="second">ねこねこねこねこ</li>
<li id="third">さるさる<strong>さる</strong>さる</li>
<li id="fourth">きじきじきじきじ</li>
</ul>
</body>
</html>
