ユニバーサルセレクタ（*）

CSSソース

* {
     margin: 0;
     padding: 0;
}

タイプセレクタ（要素名）

CSSソース

p {
     margin: 0 0 1em;
     padding: 0;
}
img {
     border: 0;
}

classセレクタ（要素名.class名）

CSSソース【1】

.name {
     font-weight: bold;
}

XHTMLソース【2】

<p class="name">苗字 名前</p>
<ul class="name">
 <li>苗字 名前</li>
 <li>苗字 名前</li>
</ul>

idセレクタ（要素名#id名）

CSSソース【3】

.name {
     font-weight: bold;
}
.sign {
     text-align: right;
}

XHTMLソース【4】

<p class="name sign">苗字 名前</p>

CSSソース【5】

.name.sign {
     font-weight: bold;
     text-align: right;
}

XHTMLソース【6】

<p class="name sign">苗字 名前</p>

idセレクタ（要素名#id名）

CSSソース

#container {
     margin: 0 auto;
     padding: 10px;
}

XHTMLソース

<div id="container">
・・・
</div>

子孫セレクタ（空白文字区切り）

CSSソース

#container #main p.name {
     font-weight: bold;
     text-align: right;
}

XHTMLソース

<div id="container">
 <div id="main">
  <p class="name">右寄せの太字になります</p>
  <p class="name">右寄せの太字になります</p>
 </div>
</div>

子セレクタ（> 区切り）

CSSソース

#main > p {
     color: red;
}

XHTMLソース

<div id="main">
 <p>赤字になります</p>
 <div class="section">
  <p>文字色は変わりません</p>
 </div>
 <p>赤字になります</p>
</div>

隣接セレクタ（+ 区切り）

CSSソース

h2 + p {
     font-size: 120%;
}

XHTMLソース

<h2>見出し</h2>
<p>文字サイズが大きくなります</p>
<p>文字サイズは変わりません</p>

セレクタのグループ化

CSSソース

h1,h2,h3,h4,h5,h6,
#container #main p {
     font-size: 120%;
     font-weight: normal;
}

リンク擬似クラス（:link、:visited）

CSSソース

a:link {
     color: red;
}
a:visited {
     color: gray;
}

ダイナミック擬似クラス（:hover、:active、:focus）

CSSソース

a:hover {
     color: black;
}
a:active {
     font-weight: bold;
}
a:focus {
     font-weight: bold;
}

W3C仕様書の参照箇所

• CSS 2.1 - 5 Selectors

• 第2章 CSSの基本法則