PHP & JavaScript Room :: 設置サンプル

---

こちらはp要素ですが、sample2というIDを指定した要素の外にあるため、 スタイルが適用されません。

<style type="text/css">
    #sample1 .waku {
        padding:30px 5px;
        width:80%;
        border:1px #ddd solid;
        background-color:#eeeeee;
    }
    div#sample1 .waku {
        background-color:#ffffcc; /* セレクタを指定しているので優先される */
    }
</style>

<div id="sample1">
    <p class="waku">
        #sample1 .wakuでは背景色に"#eeeeee"を指定していますが、<br>
        ID名の前にセレクタを指定しているdiv#sample1.wakuの<br>
        背景色"#ffffcc"のスタイル適用が優先されます
    </p>
</div>

<hr />

<style type="text/css">
    #sample2 p {
        padding:5px;
        width:80%;
        border:1px #ddd solid;
        background-color:#e8e8e8;
        color:blue;
    }
</style>

<div id="sample2">
    <p>
        ID名.要素という風に指定すると、
        IDを指定した要素内にある特定の要素だけにスタイルが適用されます。
        この例ではsample2というIDを指定した要素内のp要素に
        特定のスタイルを指定しています。
    </p>
</div>
<p>
    こちらはp要素ですが、sample2というIDを指定した要素の外にあるため、
    スタイルが適用されません。
</p>