投稿日: 投稿者: きわさ

CSSセレクタにも色々あった

こんばんは。きわさです。

HTMLを書いているとjavascriptは結構使います。そしてそれと同じくらい使うのがCSSです。
CSSと言ってもidやclassでしか指定していませんでしたが、CSSセレクタは他にも色々あるようなので少し調べてみました。

まず、テスト用のHTMLを用意しておきます。

<body>
    <div id="d" class="d">
        <p id="p">1</p>
        <p class="p">2</p>
        <span>3</span>
        <p>4</p>
        <span>
            <p>5</p>
        </span>
        <input class="p" type="button" value="6" />
        <input type="button" value="7" />
        <input type="text" readonly value="8" />
    </div>
    <p>9</p>
</body>

では行きましょう。

要素を指定

p {
    color: #ff0000;
}

これは p タグを指定して色を#ff0000(赤)にします。
なのでテスト用のHTMLでは、1, 2, 4, 5, 9が赤くなります。
また、この形は要素の指定なので、span タグを指定したい場合は、

span {
    color: #ff0000;
}

となりますし、すべての要素を指定したい場合は * を使います。

classを指定

.p {
    color: #ff0000;
}

classを指定したい場合は「.」をつけます。
なのでこの場合はp タグではなくclass=”p”の要素の色が赤になります。
テスト用HTMLの2, 6が赤くなります。

classと要素の組み合わせ

input.p {
    color: red;
}

先の、要素の指定とclassの指定を組み合わせることもできます。
この場合は、class=”p”であるinput タグが対象となります。
つまり、テスト用HTMLの6のみが赤くなります。

idを指定

#p {
    color: red;
}

次はidの指定です。idの場合は「#」を使います。
idは重複できないので、1つの要素を対象とします。
テスト用HTMLの1が赤くなります。

子要素を指定

div > p {
    color: red;
}

これはdiv タグの直下にあるp タグを指定しています。
間に他の要素がある場合などは直下ではないので対象外です。
なのでテスト用HTMLでは、1, 2, 4が赤くなります。

また、これはidやclassでも使用できますので、以下は同様の効果があります。

#d > p {
    color: red;
}
.d > p {
    color: red;
}

子孫要素を指定

div p {
    color: red;
}

子要素は直下のみでしたが、こちらはdiv タグ下のすべてのp タグに効果があります。
テスト用HTMLでは、1, 2, 4, 5です。

複数の要素を指定

div > span, p {
    color: red;
}

「,」で区切ることで複数のセレクタを指定することができます。
この場合は、「div > span」と「p」です。「div > span」と「div > p」ではありません。
なのでテスト用HTMLでは、1, 2, 3, 4, 5, 9が赤くなります。

隣接要素を指定

span + p {
    color: red;
}

次は「+」です。これで隣の要素を指定できます。
これはspan タグの次のp タグということです。
テスト用HTMLでは、4のみが赤くなります。

属性を指定

input[type='button'] {
    color: red;
}

属性で指定することもできます。これはinput タグのtype 属性が button である要素を指定しています。
テスト用HTMLでは、6, 7が赤くなります。

他にもまだまだあるようですが、
これくらいを覚えておけばだいたいは大丈夫ではないでしょうか。

スポンサーリンク