kotonoha_pcg@気ままに雑記

kotonoha_pcgが気分次第で様々書き置きます.dlang関係他:http://kotonoha-pcg.hatenadiary.com

CSSのセレクタメモ

CSSセレクタメモ

�@�ŋ�Sass������Ƃɖ����ɂȂ��Ă邪�A�K����CSS����Ă������Q���o�n�߂��̂ŁA���Q���łɃ����ɂ��Ă����B

#つけるやつ(idセレクタ)

id=#main/idセレクタ。id="#なにがし"で、1ファイルにつき同名のものは一度しか定義できない。

<div id="#main"></div>
#main {
    fuga
}

.つけるやつ(classセレクタ)

class="lol">/classセレクタ。とりあえずどこでも付けられる。

<td class="lol"></td>
.lol {
    text-align: center;
}

疑似クラス

a:hover/議事クラス。例通りとしか言いようがない。ある特定の動作(例:マウスカーソルを乗っける)で効果が出る。

<a href="./../css">
a:hover {
    color: #000000;
}

子孫セレクタ

.nav li/子孫セレクタは特定の親要素に内包される子要素/子孫要素を選択する。これは例を見た方が分かりやすい。

<nav class="nav'> <!-- 親要素 -->
    <ul>          <!-- navの子要素 -->
        <li>hoge<li> <!-- navの子孫要素/ulの子要素 -->
        .
        .
        .
    </ul>
</nav>
.nav li {
    color: #000000;
}
 この場合、子孫要素のliタグに対して色指定をしている。

複数セレクタをまとめる

 今Sassで若干書き方に迷ってるものの一つ。@mixinと@includeでやろうと思ってるけど、なかなかイメージがつかめないのでcssの方で先に考えようかと。

<table>
    <tr>
        <th>hoge</th>
        <td>fuga</td>
    </tr>
</table>
th, td {
    lol
}

 とりあえずまとめるだけまとめたので、後は自然に出てきて判別できるようにするのを考えようかと思います。