0.はじめに

対象者

CSS初心者
既存コードをコピペしてCSS書いている人

前提知識

CSSの書式
IDセレクタ、クラスセレクタ、タイプセレクタ
前回の勉強会スライドHTMLの基礎を読んだ人

伝えたいこと

CSSセレクタの種類
CSSの優先度

参考図書

演習で力がつく HTML/CSSコーディングの教科書

目次

CSSとは
CSSセレクタの種類
優先順位

1. CSSの概要

CSSとは

「Cascading Style Sheets」の略。
文章の見た目を表現する。

Cascadingの意味

Cascadingとは、「階段状の滝のような」「連鎖的に伝わる」という意味ですが、様々なレベルで定義されたスタイルは、上流で定義されたものが下流へ引き継がれて文書に適用されます。このようにスタイル指定が段階的に引き継がれて文書に適用されるのがCSSの大きな特徴です。

http://www.htmq.com/csskihon/006.shtml より引用。

スタイルシートを用いるメリット

文章の論理構造と表現方法を分けることができる。

複数の文書に一貫したデザインを適用できる
複数文書のスタイルを一括管理することができ、メンテナンスの効率が向上する。
HTMLが本来の目的である論理構造の記述に徹することができ、開発しやすく読みやすいソースが作れる

HTML/CSSコーディングの教科書 P094 引用(一部省略)

[補足] 正しくスタイルシートを使えていますか？以下の項目に思い当たる節はありませんか？

全画面共通のボタンのはずなのに、ある画面だけボタンのスタイルが微妙に違う
テーマとなる色を変えるには、何か所もCSSの修正が必要
table要素が入れ子状態で、ワケが分からない

CSSの歴史

1996年 : W3CがCSS1.0 を勧告
1998年 : W3CがCSS2.0を勧告
2011年以降 : W3CがCSS3.0(モジュールごとに)を勧告

CSS3.0

正式には、CSS3 標準自体は存在しません。それぞれのモジュールは独立して標準化されています。標準の CSS は、完了したモジュールによって改正および拡張された CSS2.1 で成り立っており、すべてが同じレベルの番号である必要はありません。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS3 より引用

2. CSSセレクタの基礎

セレクタとは?

セレクタは、スタイルを適用する対象。

h1 {font-size:12px;} /* タイプセレクタ */
#subtitle {font-size:12px;} /* IDセレクタ */
.main {font-size:12px;} /* クラスセレクタ */

属性セレクタ

属性セレクタは、与えられた属性や属性値の有無を使用して要素を選択します。

以下、よく使う属性セレクタ

<span lang="en-us en-gb en-au en-nz">Hello World!</span>
<span lang="pt">Olá Mundo!</span>

/* すべての "lang" 属性を持つ span 要素を bold にします。 */
 span[lang] {font-weight:bold;}

/* すべてのポルトガル語の span 要素を green にします。 */
span[lang="pt"] {color:green;}

/* すべてのアメリカ英語の span 要素を blue にします。  */
span[lang~="en-us"] {color: blue;}

https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors より引用

疑似クラス(pseudo-classes)

疑似クラスを用いると、文書の木構造とは関連しない情報や、他の単純なセレクタでは表現できない情報にもとづいて、スタイルの適用対象を選択することができます。

HTML/CSSコーディングの教科書 P183 引用(一部省略)

JavaScriptを使わずに、動的にスタイルを変更することが可能。

以下、私がよく使う疑似クラス

:hover : マウスポインタに重なっている要素
:active：選択されている要素
:focus：フォーカスされている要素
:enabled / :disabled
:checked
:nth-child(an+b) / :nth-last-child(an+b) ：（IE8では利用不可）
:nth-of-type / :nth-last-of-type ：（IE8では利用不可）
:not
:valid / :invalid : バリデーションにマッチしている/していない要素

さらに学習

[補足] 疑似クラスの`:checked`と属性セレクタの`[checked]`の違い

チェックボックスをON/OFF切り替えても、checked属性の値は残るので、疑似クラスと属性セレクタの対象要素は異なる。
以下のソースでは、チェックボックスを切り替えても、属性セレクタで指定したfont-sizeは変わらない。

input[checked] + span { font-size:30px;}
input:checked + span{ color:red;}

<input type="checkbox" value="1" checked>
<span>sample </span>

疑似要素(pseudo-elements)

要素内の特定の部分に対してスタイルを設定するもの。

直前や直後に文字や画像を挿入するのに使う(contentプロパティで指定)

::after
::before

https://developer.mozilla.org/ja/docs/Web/CSS/::before 参照

セレクタ結合子

子孫結合子：A B
子結合子：A>B
隣接結合子：A+B：Aと兄弟で、Aの直後のB
関節結合子：A~B：Aと兄弟で、Aより後ろ（直後でなくてよい）のB

3. スタイルの優先順位

詳細度(Specificity)

詳細度は、どのプロパティ値が最もある要素に関係があり、適用されるかをブラウザが決定する手段です。詳細度は異なる順のセレクタで構成されるマッチング規則にのみ基づきます。

https://developer.mozilla.org/ja/docs/Web/CSS/Specificity より引用

同じ要素に同じプロパティが指定されている場合、個別性の高いセレクタの設定が優先される。

<p id="lead" class="notes">sample</p>

p#lead{color:blue;} /* このスタイルが適用される (0.1.0.0) */
p.notes{color:green;} /* (0.0.1.1) */
p{color:yellow;} /* (0.0.0.1) */
.notes{color:red;} /* (0.0.1.0) */

詳細度の算出方法

以下の順に、優先度は低くなる

style属性でプロパティを指定
IDセレクタの数
クラスセレクタの数 + 属性セレクタの数 + 疑似クラスの数
タイプセレクタの数 + 疑似要素の数

Specificity Calculator で、詳細度は計算できる。

詳細度はポイント制ではない

クラスセレクタの数を何個増やしても、IDセレクタ1個より優先度は低い。
バージョン番号のように考えるとよい。

http://qiita.com/izumin5210/items/8ae78cb4f4bd325bccb4 参照

後に記述されているスタイルが優先される

詳細度が同じ場合は、後に記述されたスタイルが優先される。

p {color:blue;}
p {color:green;} 
p {color:yellow;} /* このスタイルが適用される */

CSSファイルをロードする順番

CSSをロードする順番が重要。
汎用的なCSSから個別性の高いCSSの順に、ロードすべき。

<head>
  <link rel="stylesheet" href="external-library.css"><!-- 外部のライブラリ(Bootstrapなど) -->
  <link rel="stylesheet" href="my-application.css"><!-- システム全体のスタイル(ヘッダやサイトテーマなど) -->
  <link rel="stylesheet" href="my-page.css"><!-- ページ専用のスタイル -->
</head>

[補足] 最重要度宣言(!important)

スタイルの記述箇所、詳細度に関係なく、!importantのスタイルが適用される。

p {font-sizze: x-large !important;}

CSS優先度を無視した「ルールの例外」なので、よほどのことがない限り、使うべきでない。

[補足] IDセレクタはほどほどに

一般的にIDセレクタは使わない方がよい。

IDを使わないCSSの設計

スタイルを使いまわせる

この話はCSSの話で、「HTMLでIDを使うな」という話ではありません。
IDは、HTMLのアンカーとして利用したり、JavaScriptのような「機能」に使用されるべきです。
CSSでIDを使わないようにすると、「class = 装飾」「ID = 機能」として、HTMLのIDとclassの住み分けを、はっきりさせることができます。