【CSS】セレクタのテスト

隣接セレクタ（E+F） 子要素セレクタ（E>F） のテスト

HTML

<h1>隣接セレクタとfirst-childテスト</h1>

<div id="section">
    <p>section width: 490px;</p>
    <h2>some company's news</h2>
<p class="items">
    <img src="http://placekitten.com/g/120/120" />このボックスの幅はボーダー幅を入れて240pxです。h2の隣接セレクタにより、このボックスだけにマージン右10pxがかかっています。
</p>
<p class="items">
    <img src="http://placekitten.com/g/120/120" />こちらにはマージン右10pxはかかりません。
</p>
    
    <h2>Next Section</h2>
    <p>blah blah blah...</p>
    <!--/#section--></div>

<div id="section2">
    
    <!--この間に要素を入れてはいけません。直近子要素セレクタにCSSが適用されなくなります-->
    
    <p class="items">
    <img src="http://placekitten.com/g/120/120" />このボックスの幅はボーダー幅を入れて240pxです。p要素のfirst-childにより、このボックスだけにマージン右10pxがかかっています。
</p>
    <p class="items">
    <img src="http://placekitten.com/g/120/120" />こちらにはマージン右10pxはかかりません。
</p>
    
    <h2>Next Section</h2>
</div>

CSS

body {
    background: #ccc;
    font-size: 12px;
    font-family: verdana, serif;
}
h1 {margin-bottom: 20px; font-weight: bold; font-size: 120%;}
#section2{
    width:490px;
    background: #f3f3f3;
    border: 1px solid #fff;
    overflow: hidden;
    margin-bottom: 15px;
}
h2 {
    clear: both;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 8px;
    font-weight: bold;
    font-size: 140%;
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
    text-shadow: 1px 1px 0 rgba(255,255,255,1)
}
p.items{
    width: 238px;
    float: left;
    margin: 0 0 10px 0;
    border: 1px solid #ccc;
    background: #fff;
}
p.items img {
    float: left;
    margin: 5px;
}


#section h2 + p {
    margin-right: 10px;
}
#section2 > p:first-child {
    margin-right: 10px;
}
#section  {
  display:none;
}