Help us understand the problem. What is going on with this article?

jQueryの基本まとめ - CSSセレクタを使おう -

More than 3 years have passed since last update.

よく忘れるやつをメモりんこ

jQueryのセレクタゆるっとまとめ

書式 指定対象 名称
$('要素') 特定の要素 $('div') 要素セレクター
$('#ID名') 特定のid属性をもつ要素 $('#hoge') IDセレクター
$('.CLASS名') 特定のclass属性をもつ要素 $('.hoge') クラスセレクター
$('要素A 要素B') 要素Aの内側にある要素B $('.hoge .fuga') 子孫セレクター
$('*') 全てのセレクタ $('*') ユニバーサルセレクター
$('A, B') 要素Aと要素B $('#hoge, .fuga') グループセレクター
$('要素A > 要素B') 特定の要素Aの直下に配置された要素B (Aの中にB) $('#hoge > .fuga') 子セレクター
$('要素A + 要素B') 要素Aの次に出現する要素B (AとBは同じ階層) $('#hoge + .fuga') 隣接セレクター
$('要素A ~ 要素B') 要素Aの後に出現する要素~要素D (Aの次~B) $('#hoge ~ .fuga') 間接セレクター
$('要素:empty') 子要素やテキストを含まない要素 $('p:empty') empty擬似クラス
$('要素:parent') 子要素やテキストを含む要素 $('p:parent') parentフィルター
$('要素:only-child') セレクタに特定の要素が1つだけ含まれている要素 $('li span:only-child') only-child擬似クラス

HTMLの読み込みが終わったら実行される

$(document).ready(function(){
});

// 省略形
$(function(){
});

グループセレクタ ('A, B')

グループセレクタでは複数のセレクタをカンマ区切りで指定できる。
ただし、1つのシンタックス''の中でカンマ区切りをすること。

$(function(){
  $('#first, #second').css('color', 'red');
  // $('#first', '#second').css('color', 'red'); エラー。よくやるw
});
<ul>
    <li id="first">テキストテキストテキストテキスト</li>
    <li id="second">テキストテキストテキストテキストテキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

子セレクタ ('A > B')

特定の要素の直下に配置された要素を選択できる

$(function(){
  $('#first > span').css('color', 'red'); // firstのspan
});
<ul>
    <li id="first"><span>HIT</span>テキストテキストテキストテキスト</li>
    <li id="second">テキストテキストテキストテキストテキスト</li>
    <li id="third">テキストテキストテキスト<span>テキスト</span>テキスト</li>
    <li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

隣接セレクタ ('A + B')

特定の要素の次に出現する要素を選択できる

$(function(){
  $('#first + li').css('color', 'red'); // second
});
<ul>
    <li id="first"><span>テキスト</span>テキストテキストテキストテキスト</li>
    <li id="second">テキストテキストテキストテキストテキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

関接セレクタ ('A ~ B')

特定のセレクタの後に出現する要素を選択できる
※ ここでは#secondは含まれないので要注意。

$(function(){
  $('#second ~ #fourth').css('color', 'red'); // third, fourth
});
<ul>
    <li id="first"><span>HIT</span>テキストテキストテキストテキスト</li>
    <li id="second">テキストテキストテキストテキストテキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

子要素やテキストが無い要素を選択 (:empty)

$(function(){
  $('li:empty').css('color', 'red'); // first, 最後のli
});
<ul>
    <li id="first"></li>
    <li id="second">テキストテキストテキストテキストテキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li></li>
</ul>

子要素やテキストを含む要素を選択 (:parent)

$(function(){
  $('li:parent').css('color', 'red'); // second, third
});
<ul>
    <li id="first"></li>
    <li id="second">テキストテキストテキストテキストテキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li></li>
</ul>

セレクタに特定の要素が1つだけ含まれている要素を選択 (:only-child)

$(function(){
  $('li span:only-child').css('color', 'red'); // firstのspan
});
<ul>
    <li id="first"><span>HIT</span>テキストテキストテキストテキスト</li>
    <li id="second">テキスト<span>テキスト</span>テキスト<span>テキスト</span>テキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

特定の文字列が含まれている要素を選択 (:contains)

$(function(){
  $('li:contains("HIT")').css('color', 'red'); // first
});
<ul>
    <li id="first"><span>HIT</span>テキストテキストテキストテキスト</li>
    <li id="second">テキスト<span>テキスト</span>テキスト<span>テキスト</span>テキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>

特定の要素が含まれている要素を選択 (:has)

$(function(){
  $('li:has(span)').css('color', 'red'); // first, second
});
<ul>
    <li id="first"><span>HIT</span>テキストテキストテキストテキスト</li>
    <li id="second">テキスト<span>テキスト</span>テキスト<span>テキスト</span>テキスト</li>
    <li id="third">テキストテキストテキストテキストテキスト</li>
    <li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
mi_upto
お肉とお寿司とわんこが好きです。 twitter : https://twitter.com/mi_upto
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした