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