/
CSSセレクタはスタイルを適用する対象を指定するもの。
HTMLタグ、classやid、疑似要素、疑似クラスなどがセレクタになります。
何気なく使っているセレクタですが、整理がてら指定方法をまとめてみました。
セレクタを使いこなす事で無駄の少ない見やすいcssになりますよ^^
cssセレクタ による指定
基本的なセレクタ
| code | 指定方法 | 適用 | 説明 |
|---|---|---|---|
| HTMLタグ | そのまま記載 | 指定HTMLタグに適用 | |
* {color:#000;} | * (アアタリスク) | すべての要素に適用 | |
.class {color:#000;} | . (頭にドット) | 指定クラス名がある要素に適用 | 同一class名をページ内で複数使用可 |
#id {color:#000;} | # (頭にシャープ) | 指定id名がある要素に適用 | id名はページ内で一意(重複不可) |
結合子 (セレクタの組み合わせ)
「同じ結合子を複数」「種類の異なる結合子組み合わせて」使用する事も可能です。
ただ、あまり階層を深くすると、適用されるセレクタが分かりづらくブラウザ速度にも影響が出やすくなります。
状況にもよりますが、複合セレクタ利用時は 2、3階層まで を目安にするのがお勧めです。
| code | 指定記号 | 適用 | 説明 | |
|---|---|---|---|---|
| 1 | .prt li {…} | スペース | 子孫全て | ・.prt内 の 全てのli要素 に適用 |
| 2 | .prt > li {…} | > (大なり) | 子要素のみ | ・.prt内 の 直接の子要素li に適用 (孫要素には不適用) |
| 3 | .tg + li {…} | +(プラス) | 直後の要素 | ・直後に指定した要素がある場合に適用(無ければ無視 ) |
| 4 | .tg ~ li {…} | ~ (チルダ) | 後にある要素 | ・共通の親要素内の後ろの要素 に適用 |
1space
<style>
li {color:#333;}
.prt li {color:orange;}
</style>
<ul class="prt">
<li>li-1</li>
<li class="tg">li-2
<ul class="child">
<li>child-1</li>
<li>child-2</li>
</ul>
</li>
<li>li-3</li>
<li>li-4</li>
<ul>2greater
<style>
li {color:#333;}
.prt > li {color:orange;}
</style>
<ul class="prt">
<li>li-1</li>
<li class="tg">li-2
<ul class="child">
<li>child-1</li>
<li>child-2</li>
</ul>
</li>
<li>li-3</li>
<li>li-4</li>
<ul>3plus
<style>
li {color:#333;}
.tg + li {color:orange;}
</style>
<ul class="prt">
<li>li-1</li>
<li class="tg">li-2
<ul class="child">
<li>child-1</li>
<li>child-2</li>
</ul>
</li>
<li>li-3</li>
<li>li-4</li>
<ul>4tilde
<style>
li {color:#333;}
.tg ~ li {color:orange;}
</style>
<ul class="prt">
<li>li-1</li>
<li class="tg">li-2
<ul class="child">
<li>child-1</li>
<li>child-2</li>
</ul>
</li>
<li>li-3</li>
<li>li-4</li>
<ul>
<ul>
<li>…</li>
<li>…</li>
<ul>css 属性セレクタ
属性セレクタとは、 HTMLタグ内の属性 (herf, title, target, type 等) を対象にしたセレクタ。
「target="_blank" だったらアイコンを付ける」など様々な指定が可能になります。
属性と = の間に記号を入れれば、値の一部だけでの指定も可能。使い方によって手間が大幅に省けます^^
| code | 指定記号 | 指定方法 | 適用 / 説明 |
|---|---|---|---|
a[target="_blank"]{…} | 属性+値をそのまま[ ]に記述 | target="_blank" を含む aタグに適用 | |
a[target^="_b"]{…} | ^ (キャレット) | 属性^+値の最初の文字列を[ ]に記述 | target の値が _b で始まっている aタグに適用 |
a[target$="nk"]{…} | $ (ダラー) | 属性$+値の最後の文字列を[ ]に記述 | target の値が nk で終わっている aタグに適用 |
a[target*="lan"]{…} | * (アアタリスク) | 属性*+値に含まれる文字列を[ ]に記述 | target の値に lan が含まれる aタグに適用 |
属性セレクタ sample
<style>
a {color: #333;}
a[target^="_b"] {color: orange;}
</style>
<a href="…">内部リンク</a>
<a href="…" target="_blank">外部リンク</a>