Mill's Note

【CSS-rules】セレクタの指定方法まとめ

/

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>

参考サイト