cssのセレクタパターンについて調べたメモ
セレクタって何かね？
CSSの書式は次のようになっています。
セレクタ { プロパティ:値; プロパティ:値； }
セレクタとは、スタイルを適用する対象のことです。
p { color: white; }
この例では、pがセレクタ、colorがプロパティ、whiteが値です。
複数のセレクタに対して、共通のスタイルを宣言する場合は、複数のセレクタをカンマ(,)で並べます。
body,h1,h2 { font-family: sans-serif; }
これは次のように書いたのと同じ事です。
body { font-family: sans-serif }
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
全称セレクタ
- { margin: 0;
padding: 0; }
ブラウザごとに初期設定のスタイルが決まっていますが、
それをリセットさせるために使えます。
が、別の手段を使ったほうがよさそうです。
各タグごとに初期値を設定すべきとあります。
タイプ・セレクタ
HTMLのタグ要素を指定できます。
h1 { font-size: 10px; }
文脈セレクタ
HTMLのツリー構造に固定した要素をセレクタで指定できます。
ここはp要素の中これはpの中のem要素です。です。
上記emタグのみスタイルを指定する場合
p em { color: red }
クラス・セレクタ
クラスに付けるスタイルです。
<p class="note">ノート</p>に対応する例p.note [ font-style: italic }
class="note"を持つすべての要素に対応する例
.note { font-size: 10px }
class属性の属性値は複数指定できますが、それら複数のclass属性に対応できます。
class属性値がnoteとaccessである場合
この要素に対応する例
p.note.access { font-weight: bold }
一意セレクタ
クラスセレクタはclassに対するセレクタでしたが、一意セレクタはidに対するセレクタです。
<h1 id="title">Good evening</h1>対応するセレクタ例
h1#title { color: #eeddff }
実は他にもこんなセレクタが
属性セレクタ
属性値にかかわらず、href属性を持つ a 要素
a[href] { text-decoration: underline }
target=_blankである全ての a 要素
a[target="_blank"] { font-weight: bold }
"|="で、属性値がハイフンで区切られているものの先頭単語を指定します。
次の例は「en」「en-US」「en-cockney」などにマッチします。
*[lang|="en"] { color: red }
他にも、"*="や"^=", "$="などいろいろな指定方法があります。
<ul> <li>長男 <ol> <li>長女</li> <li>次女</li> </ol> </li> <li>次男 <ol> <li>長男</li> <li>長女</li> </ol> </li> </ul>
ul * li { background-color: yellow; }
実行結果
子供セレクタ
孫要素以降を指定するには、ワイルドカード * を使いました。
子要素だけを指定したい場合「大なり」不等号記号を使います。
body > p { line-height: 1.2 }
body要素の直接の子要素であるp要素に対してのみ、スタイルを設定します。
孫要素にはマッチしません。
このあたり、もう少し実際に触れて覚えて行きたいところです。
隣接セレクタ(兄弟セレクタ)
ある要素の共通の子要素であり、かつ前後に隣接する要素に対してスタイルを設定します。
h1要素の直後に現れるh2要素にだけマッチする場合
h1 + h2 { margin-top: -5mm }
まだまだ先は長いぞー。
参考： CSSセレクタについてのおさらい
2日目〜次の仕事を始める前にデザインの勉強
1日目のふりかえり
1日目はfloatを使ったレイアウトの勉強をしました。 慣れると意外に簡単〜♪
ここのページにわかりやすく書かれていた。
