※class属性値：任意の文字列を指定できる
id属性値：アルファベットに始まり、任意の数のアルファベット、数字、ハイフン、アンダースコア、コロン、ピリオドのみから構成される名前を指定。
文中で一意
※id属性値、class属性値とも、大文字と小文字は区別される
<div id="sidebar">
<h3 class="sideheading">About This Site</h3>
<p>This is my site.</p>
<h3 class="sideheading">My Links</h3>
<ul class="sidelinks">
<li class="links"><a href="archives.html">Archives</a></li>
<li class="links"><a href="about.html">About Me</a></li>
</lu>
</div>
.sideheading {
font-family: Georgia, serif;
color: #c63;
border-bottom: 1px solid #ccc;
}
.sidelinks {
list-style-type: none;
}
.links {
font-weight: bold;
}
<div id="sidebar">
<h3>About This Site</h3>
<p>This is my site.</p>
<h3>My Links</h3>
<ul >
<li><a href="archives.html">Archives</a></li>
<li><a href="about.html">About Me</a></li>
</lu>
</div>
#sidebar h3 {
font-family: Georgia, serif;
color: #c63;
border-bottom: 1px solid #ccc;
}
#sidebar ul {
list-style-type: none;
}
#sidebar li {
font-weight: bold;
}
上記と同じ結果になる
同じ要素に同じスタイルを指定し、論理的に分割された各セクション#nav、#content、#sidebar、#footerなどで、子孫セレクタで固有のスタイルを適用する。
例
<h3>要素に関する共通のルール（ここではserifフォント）を設定し、場所に応じて色を変える。
共通ルールは繰り返す必要がなくなる。
h3 {
font-family: Georgia, serif; /*すべてのh3にserifフォント*/
}
#content h3 {
color: purple;
}
#sidebar h3 {
color: orange;
}
<div id="sidebar">
<h3>About This Site</h3>
<p>This is my site.</p>
<h3>My Links</h3>
<ul>
<li><a href="archives.html" class="red">Archives</a></li>
<li><a href="about.html" class="red">About Me</a></li>
</ul>
</div>
a:link.red {
color: red;
}
★リンクカラーを赤から緑に変更する場合
a:link.red {
color: green;
}
作業は簡単に完了し、きちんと機能するが、class名はredのまま。名前はclass名にすぎないので、何色の名前であれ機能的には関係ないが、class名には見栄えと関係ない名前を使用したほうが気持ちがいい。
class名を割り当てなければ、さらに手間がかからず、意味的に健全。
<div id="sidebar">
<h3>About This Site</h3>
<p>This is my site.</p>
<h3>My Links</h3>
<ul >
<li><a href="archives.html">Archives</a></li>
<li><a href="about.html">About Me</a></li>
</lu>
</div>
#sidebar li a:link {
color: green;
}
<div id="nav">
<ul>
<li><a href="archives.html">Archives</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</div>
★<ul>要素は<div>同様ブロックレベルなので、idを直接割り当てられる。
<ul id="nav">
<li><a href="archives.html">Archives</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
※nav内に<ul>以外の要素（パラグラフ、<blockquote>、または<form>など）が含まれていない場合のみ。
文法的には、ul要素の直下に置くことができるのはli要素だけであり、pやblockquote、form要素は置けないが、ulがそれらブロック要素と並存する場合には<div>要素が意味を持つ。
<form id="myform"> ・・・form要素が入る・・・ </form>
<p id="footer>Copyright 1999-2007 Beautifuldays.co.ltd</p>
※フッタにパラグラフを一つしか含まないことが条件
<ul>
<li>Weblog</li>
<li>Articles
<ul>
<li>How to Beat the Red Sox</li>
<li>Pitching Past the 7th Inning
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
</li>
<li>Eighty-Five Years Isn't All That Long, Really</li>
</ul>
</li>
<li>About</li>
</ul>
★スタイルのために追加するマークアップは一か所のみ
<ul id="sitemap">
<li>Weblog</li>
<li>Articles
<ul>
<li>How to Beat the Red Sox</li>
<li>Pitching Past the 7th Inning
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
</li>
<li>Eighty-Five Years Isn't All That Long, Really</li>
</ul>
</li>
<li>About</li>
</ul>
子孫セレクタを使用して、リストの各階層に独自のスタイルを与える。
例
上位の階層を大きいフォントサイズ、ボールド体、オレンジにして、下位の階層では徐々に小さいフォントサイズにしたい→まずリスト全体の文字サイズ、フォントの太さ、カラーを設定
次に下位レベルでネストしている<li>要素のサイズを小さくし、カラーを変更する
#sitemap {
font-size: 140%;
font-weight: bold;
color: #f63;
}
#sitemap li ul {
font-size: 80%;
color: #000;
}
★上記ルールにより、最上位レベルの項目は大きなフォントサイズ、ボールド体、オレンジ色になり、その中にネストしているすべてのリストは80パーセント（140パーセントのフォントサイズに対しての80パーセント）のフォントサイズで黒になる。
三番目の階層に小さなフォントサイズを割り当てる必要はない。80パーセントのさらに80パーセントの大きさが自動的に適用される。
こうして、リストの各階層に徐々に小さくなるフォントサイズが適用される。
#sitemap {
font-size: 140%;
font-weight: bold;
color: #f63;
}
#sitemap li { /*すべての<li>要素に対する一般的なリストマーカーを
list-style: none; 非表示にする*/
}
#sitemap li ul {
font-size: 90%;
color: #000;
}
#sitemap li ul li ul li { /*第3階層の項目*/
font-weight: normal;
padding-left: 16px;
background: url(arrowicon.gif) no-repeat 0 50%; ・・・①
①画像を左端から0ピクセル、上端から50パーセントのところに揃えるようブラウザに指示。これは、リストマーカーをテキストの左側に、かつ垂直方向に中央揃えにする。
垂直方向の位置指定にもピクセル値を使うことはできるが、パーセンテージを使用すれば、テキストをサイズ変更してもレイアウトの維持が可能となる。
第2階層のリスト項目にのみ適用するルールを追加する
#sitemap {
font-size: 140%;
font-weight: bold;
color: #f63;
}
#sitemap li {
list-style: none:
}
#sitemap li ul {
margin: 6px 15px;
padding: 0 15px;
font-size: 80%;
color: #000;
border-left: 1px dotted #999;
}
#sitemap li ul li ul {
border: none;
}
#sitemap li ul li ul li {
font-weight: normal;
padding-left: 16px;
background: url(arrowicon.gif) no-repeat 0 50%;