CSSセレクター
ここに全部載っている
基本
タグの名前で検索する
例)
div <div></div> などがヒットするクラス(class)の属性値で検索する
頭に
. を付ける例)
.foo <div class="foo"></div> などがヒットするIDの属性値で検索する
頭に
# を付ける例)
#foo <div id="foo"></div> などがヒットするidやclass以外の属性を選択する時に使う
idやclass属性でも部分一致検索などをしたい場合に使うことがある
結合子
例)
#foo a fooの中にあるaを検索する
html<div id="foo">
<a></a> <!-- ヒットする -->
<p>
<a></a> <!-- これもヒットする -->
</p>
</div>
<a></a> <!-- これは対象外 -->これは一番よく使う
これだけ覚えておけば大体の場面でどうにかなる
例)
#foo > a fooの直下にあるaを検索する
html<div id="foo">
<a></a> <!-- ヒットする -->
<p>
<a></a> <!-- 直下ではないのでヒットしない -->
</p>
</div>例)
#foo ~ a fooより後に来るaを検索する
html<div id="foo">
<a></a> <!-- 同じ階層ではないのでヒットしない -->
</div>
<a></a> <!-- ヒットする -->
<p>
<a></a> <!-- 同じ階層ではないのでヒットしない -->
</p>
<a></a> <!-- ヒットする -->例)
#foo + a fooの直後に来るaを検索する
html<div id="foo">
<a></a> <!-- 同じ階層ではないのでヒットしない -->
</div>
<a></a> <!-- ヒットする -->
<p>
<a></a> <!-- 同じ階層ではないのでヒットしない -->
</p>
<a></a> <!-- 直後ではないのでヒットしない -->複数選択
カンマ
, で区切ることで複数選択できる例)
#foo, .bar