アナログCPU:5108843109

ゲームと音楽とプログラミング(酒と女とロックンロールのノリで)

('ω') < イザユケエンジニャー

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



================================
↑実装サンプルここまで

なんか、はてブロの元のCSSが混じってて思ったのと違うけど
自分で書いたCSSは適用されてるからいいか。