CSSの指定方法いろいろメモ
バック兼業フロントエンドエンジニア1年生、昔はHTMLは書いてたけどCSSすごい苦手だったのが今更響いている…。
サンプルを作って試したのをメモ。
<HTML>
<div id="divid1" class="divclass1 divclass2"> <span>test1</span> <div id="divid2" class="divclass1 divclass3"> <span>test2</span> <div id="divid3" class="divclass2 divclass3"> <span>test3</span> <input type="checkbox" class="cbclass1" checked> <input type="checkbox" checked> </div> </div> </div>
<CSS>
/* すべてのdiv要素に有効 */ div { margin: 5px; } /* idが「divid1」「divid2」「divid3」のいずれかの要素であれば有効 */ #divid1, #divid2, #divid3 { padding: 5px; } /* idが「divid1」の要素に有効 */ #divid1 { background: #CCC; } /* 「divclass1」のclassを持つ要素に有効 */ .divclass1{ border: #000 solid 1px; } /* idが「divid1」の要素の直下にあり「divclass3」classを持つ要素に有効 */ /* (=直下でなく孫以下の要素の場合は無効) */ #divid1 > .divclass3{ border: #F00 solid 1px; } /* idが「divid2」の要素以下にあるすべてのspan要素に有効 */ #divid2 span{ background: #FF9; } /* 「divclass2」「divclass3」の両方のclassを持つ要素に有効 */ .divclass2.divclass3{ border: #0F0 solid 2px; } /* 「divclass2」「divclass3」の両方のclassを持つ要素以下にあるすべてのspan要素に有効 */ .divclass2.divclass3 > span{ font-weight: bold; } /* 「cbclass1」を持つ要素にchecked属性がある場合に有効 */ .cbclass1:checked{ cursor: pointer; } /* typeがcheckboxであるinput要素のうち、「cbclass1」を持たず、チェックされていない場合に有効 */ input[type=checkbox]:not(.cbclass1):not(:checked){ outline: solid 3px #F00; }
ざっくりまとめ
- 要素の特定方法
- 「div」ならdivタグ
- 「#div」ならdivというid
- 「.div」ならdivというclass
- 複数要素を並べるとどうなるか
- カンマ区切りで列挙された要素すべて
- 「 > 」で直下指定
- スペースを空けて書けば以下要素すべてからの指定
- スペースを空けずに書けば両方を持つ要素を指定
- 「[type=checkbox]」「:checked」など属性指定できる
- 「:not()」で否定
↓実装サンプルここから
================================
test1
test2
test3
================================
↑実装サンプルここまで