CSS

引き続き｢実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips;~｣を閲読中です。
今日はCSSのセレクタです。
セレクタというのは、スタイルを適用する対象を選択するもののようです。

セレクタ { プロパティ: 値; プロパティ: 値 }

セレクタにもいろいろと種類があるようです。

/*----------------------------------*/
/* グループ化                       */
/*----------------------------------*/
/* h1とh2要素を太字にする */
h1, h2 { font-weight: bold }

/*----------------------------------*/
/* ユニバーサルセレクタ             */
/*----------------------------------*/
* { color: #000 }          /* 全ての要素の文字色を#000にする */
*.section { margin: 1em }  /* class="section"要素に1emのマージン */
.section { margin: 1em }   /* class="section"要素に1emのマージン */

/*----------------------------------*/
/* 要素型セレクタ                   */
/*----------------------------------*/
h3 { font-weight: italic } /* h3要素をイタリック体 */

/*----------------------------------*/
/* 子孫セレクタ                     */
/*----------------------------------*/
div a { font-size: 120% }  /* divの子孫要素のa要素にのみ */

/*----------------------------------*/
/* 子供セレクタ                     */
/*----------------------------------*/
body > div { border: 1px solid #ccc } /* bodyの直接の子要素のdivにのみ */

/*----------------------------------*/
/* 隣接兄弟セレクタ                 */
/*----------------------------------*/
dt + dd { font-size: 150% } /* dtの直後に出現するdd要素にのみ */

/*----------------------------------*/
/* 属性セレクタ                     */
/*----------------------------------*/
div[id] { font-size: 150% }              /* idが指定されているdiv要素にのみ */
div[id=pr123] { font-size: 150% }        /* idがpr123に指定されているdiv要素にのみ */
div[class~=section] { font-size: 150% }  /* classにsectionが指定されているdiv要素にのみ */
html[lang|=ja] > div { font-size: 150% } /* lang=jsが指定されているhtmlの子要素のdiv要素にのみ */

今まで何気なく使っていたものもありますが、使ったことがないものもあるので、 これを機に使っていこうと思います。