更新日：
CSSでよく使うセレクタ、要素、並べ方
- div, p, span
- a:link, a:visited, a:hover, a:active
- img
- table, tr, th, td
- ul, ol, li
- br, hr
- blockquote
- h1, h2, h3, h4, h5
- pre, code
A. 複数のセレクタに共通のCSS形式を割り当てる場合、(,)カンマで区切る。
h2,h3,p {
margin: 5px;
padding: 15px;
text-decoration: underline; overline;
}
<p>でんきかいでん</p>
でんきかいでん
B01. 限定された子孫のみにその要素を割り当てる場合、半角スペースで区切る。
.concon img {
background-color: #cccccc;
margin: 10px;
padding: 5px;
border: 1px solid #000000;
}
.meni img {
margin: 10px;
padding: 5px;
border: 0;
}
<div class="concon">
<img src="img/denkikaiden100px.gif">
</div>
<div class="meni">
<img src="img/denkikaiden100px.gif">
</div>
class="concon"のimgには、background、borderが見えるが、
class="meni"のimgには、見えない。
B02.クラスの書き方によって、正しくその要素が反映される。前後を間違えていると、CSSが正しく反映されない。
.comi img {
float: left;
background-color: #6495ed;
margin: 10px;
padding: 5px;
border: 5px solid #4169e1;
}
img.mico {
float: left;
background-color: #6495ed;
margin: 10px;
padding: 5px;
border: 5px solid #4169e1;
}
<div class="comi">
<img src="img/denkikaiden100px.gif" width="100" height="100" alt="image">
</div>
<img class="mico" src="img/denkikaiden100px.gif" width="100" height="100" alt="image">
<img class="comi" src="img/denkikaiden100px.gif" width="100" height="100" alt="image">
img の class として comi を使っても、CSS が反映されていないことがわかる。
しかし、mico はちゃんと反映されている。
CSS の中で、前後が違うとこういう結果として出ることがわかる。
C. 直下の子要素のみにそのスタイルを適用する。
「直下の子要素」のみにスタイルを適用し、それよりも下の階層の孫やひ孫などの要素にはそのスタイルが適用されない方法。
「margin-right: 0;」と、「font-family: fantasy,cursive;」が「子要素」のみに適用されて、それより下の階層には適用されていないのがわかる。
.tyokka > div {
margin-left: auto;
margin-right: 0;
}
.tyokka > div > p {
text-align: right;
font-weight: bold;
font-family: fantasy,cursive;
font-size: 140%;
}
<div class="tyokka">
<div class="gold-BX" style="width: 450px;"> ← 子要素
<p>div class=tyokkaの子要素</p>
<div class="babyblue-BX" style="width: 300px;"> ← 孫要素
<p>div class=tyokkaの孫要素</p>
<div class="pink-BX" style="width: 170px;"> ← ひ孫要素
<p>div class=tyokkaのひ孫要素</p>
</div>
</div>
</div>
</div>
textへの設定に関しては、divを分けて指定しないとなぜか「孫」にも「ひ孫」にもそのまま影響が出た。
調べてみてもなぜかわからない。
もちろんpでくくってない状態でも影響が出るし、pでくくっていてもCSSでtext-alignなど全てまとめて指定したら影響が出ることに変わりはなかった。
ので分けて指定したら解消された。
div class=tyokkaの子要素
div class=tyokkaの孫要素
div class=tyokkaのひ孫要素
CSSで数値が0（ゼロ）の場合
CSSで数値を0（ゼロ）と書く場合もある。
その場合、単位がpxであろうがemであろうが、単位を省略することも可能。
CSSの量が少なければ気にならないけれども、増えれば増えるほどデータ量として無視できないサイズになるので、Googleなどは省略している。
が、個人や小組織レベルが扱う程度のサイトでは省略して得られる恩恵よりも、ちゃんと単位まで書き込んでおいた方が第三者と共同作業を行う際など、可読性や保守性の高さを保持できる、という意見もある。