HTMLでWebコンテンツを記述する際，タグを入れ子状態にして記述します。例えば以下のように，1つの囲みがありその中に見出しや段落で文書を記述するといったことが行えます。
<div>
<h2>コラム：テキスト・エディタを使ってWebコンテンツを作成できる</h2>
<p>Webページを作成する場合，オーサリング・ツールなどのWebコンテンツを
作成するツールを利用せずとも，OSに搭載されているテキスト・エディタを
使って作成することが可能です。例えば，Windowsならばメモ帳，Linuxなら
geditやKwrite，viなどで編集が行えます。</p>
</div>上の例の場合，<div>タグの中に<h2>と<p>タグが入れ子状態になっています。
このようなタグが入れ子状になっている場合は，入れ子状になっているタグのみにスタイルを指定することが可能となっています。この方法を活用すると，本文にある見出しとコラムなどといった囲み状になっている部分の見出しのデザインを別にすることができます。
入れ子状態のタグについてスタイルを指定する場合は，以下のように親となるタグ，スタイルを変更する大将となるタグの順にスペースで区切って指定します。
親タグ 対象のタグ { 要素 : 値; }例えば，<div>タグ内にある<h2>タグの文字色を赤にしたい場合は，以下のようにスタイルを記述します。
div h2 { color : red; }このようなスタイルで以下のようなHTMLを表示すると，<div>に囲まれていない<h2>は黒文字で，<div>に囲まれた<h2>は赤文字で表示されます。
<h2>ここは黒字で表示される</h2>
<div>
<h2>ここは赤文字で表示される</h2>
</div>また，2つ以上の入れ子状のスタイルを指定することも可能です。この場合は以下のように，親となるタグを順にスペースで区切りながら列挙し，最後にスタイル変更の対象となるタグを指定します。例えば，HTMLの構造が以下のようになっている場合は考えます。
<div>
<p>日経BPのサイトは<a href="http://itpro.nikkeibp.co.jp/">ITに関わる
ユーザーに向けた<strong>ITpro</strong></a>などを提供しています。</p>
</div>このコンテンツ内にある「ITpro」という文字は，<div>→<p>→<a>→<storng>と入れ子構造になっています。この場合にITproのフォント・サイズを16ptにしたい場合は，以下のようにスタイルを指定します。
div p a strong { font-size : 16pt; } また，それぞれのタグにはIDやクラスを利用することが可能です。例えば，columnクラスの ただし，スペースで区切って入れ子状のタグのスタイルを指定する場合に注意点があります。スタイルを指定した入れ子構造に合致するタグの以外にも，構造の中に他のタグが入っているタグについてもスタイル変更の対象となります。これは，例えば特定の囲みの中にあるすべての<strong>タグについて赤文字にしたい場合であっても，1回のスタイル指定のみでスタイルを変更できる利点があります。 例えば，以下のように<div>で囲んだタグ内の<strong>タグすべてで赤文字にしたい場合は以下のようにスタイルを記述するだけで実現できます。 この場合，<div>→<strong>の入れ子構造以外にも，以下のような<div>→<p>→<strong>や<div>→<table>→<tr>→<td>→<strong>となった入れ子構造でもスタイル変更の対象となります。 ただし，HTMLの構造を十分把握してスタイルを設定しないと，思わぬタグについてもスタイルが変更されてしまいます。div.column p { font-style : italic; }div strong { font-color : red; }● <div>→<p>→<strong>の構造
<div>
<p>途中に他のタグをはさんでいても<strong>スタイルの適応対象</strong>
となる。</p>
</div>
● <div>→<table>→<tr>→<td>→<strong>の構造
<div>
<table>
<tr>
<td><strong>テーブルなどの構造が途中に入っていた</strong>と
してもスタイルが適用する</td>
</tr>
</table>
</div>
