CSSセレクタ、classにおける半角スペースの意味

CSSを見ているとセレクタの間にスペースがあったりなかったりします。

「なんか気持ち悪いからスペース消したら（あるいはスペースを追加したら）崩れた！スペースなんなの!?」

と、思ってきたことかと思います。

CSSのセレクタにおいてスペースは重要な意味を持ちます。

CSSセレクタ、classにおける半角スペースの意味を解説します。

セレクタについてはこちら↓

結論

スペースがない場合はand条件になる。

スペースがある場合は子孫要素への指定になる。

E.A（スペースなし）

スペースなしで接続している場合はand条件になります。Eと.A両方の要素を持つセレクタとなります。

例

<style>
    ul.A{
        border:1px solid #333;
    }
</style>
<ul>
    <li class="A">クラスAのliタグ</li>
    <li class="B">クラスBのliタグ</li>
</ul>

<ul class="A">
    <li>ただのliタグ</li>
    <li>ただのliタグ</li>
</ul>

「ul」と「.A」の間にスペースなく接続しています。

この場合、クラスAを持つulタグに対してborderを指定していることになります。

E .A（スペースあり）

スペースがある場合は子孫要素を指定しています。E要素の子孫のうち.Aがある要素となります。

例

<style>
    ul .A{
        border:1px solid #333;
    }
</style>
<ul>
    <li class="A">クラスAのliタグ</li>
    <li class="B">クラスBのliタグ</li>
</ul>

<ul class="A">
    <li>ただのliタグ</li>
    <li>ただのliタグ</li>
</ul>

パッと見わかりにくいですが、「ul」と「.A」の間にスペースがあります。

この場合、ulタグの子孫要素のうちクラスAを持っている要素に対してborderを指定していることになります。

このようにスペースありなしで指定箇所が変わります。

疑似クラスでもおなじです。

E:F（スペースなしの疑似クラス）

スペースなしで疑似クラスを指定しているときはEのうち疑似クラスFの条件に合うものとなります。

例

<style>
    ul:first-child{
        border:1px solid #333;
    }
</style>
<ul>
    <li>ただのliタグ</li>
    <li>ただのliタグ</li>
</ul>

<ul>
    <li>ただのliタグ</li>
    <li>ただのliタグ</li>
</ul>

特定の要素の一番目を指定するときなど疑似クラスを使うといちいちクラス名を指定しなくていいので楽です。

上記の場合は、1つ目のul要素に対してborderを指定していることになります。

一般的には疑似クラスはセレクタに接続して利用します。

E :F（スペースありの疑似クラス）

スペースがある場合、E要素の子孫のうち疑似クラスFの条件に合うすべてのセレクタとなります。

例

<style>
    ul :first-child{
        border:1px solid #333;
    }
</style>
<ul>
    <li>ただのliタグ</li>
    <li>ただのliタグ</li>
</ul>

<ul>
    <li>ただのliタグ</li>
    <li>ただのliタグ</li>
</ul>

「ul」と「:first-child」の間にスペースが入っています。

するとulの子孫要素すべてのうちの1つ目の要素に対してborderを指定していることになります。

一般的に疑似クラスとhtmlセレクタはくっつけないと使えないと思われがちですが、くっつけなくても使えます。

「:first-child」の前にすべてを指定するアスタリスク「*」がついているイメージです。

子要素指定である「>」の前後はスペースがあってもなくても変わらない

スペースを入れた場合子孫要素への指定になると言いましたが、子要素を指定する「>」の前後にスペースがあっても、子要素指定のまま変わりません。

その他、直後の弟要素を指定する「+」や、以降の弟要素すべてを指定する「~」も同様で、スペースをいれても変化はなく利用できます。

ただし、そのほかのセレクタ指定ではスペースが入ると意味が変わるので基本的にセレクタでは無意味なスペースは使わないことをオススメします。

スペースは何個連続でつけてもいい

スペースをはさむと子孫要素を指定することができます。

スペースをたくさんつけたらどうなるのでしょう。

結論を言うと何個つけても変わりません。

ul li

↓同じ

ul          li

スペースが複数あっても崩れはしませんが、無意味なスペースは使わないことをオススメします。

全角スペースはダメ

プログラム系すべてに言えることですが、全角と半角はまったく意味が違います。

スペースを置いてうまくいかないときは全角スペースになっていないか確認してみましょう。

「-（ハイフン）」や「_（アンダーバー）」はスペースの代わりにならない

「-（ハイフン）」や「_（アンダーバー）」はクラス名に使うことができます。

普通、英語のスペル間にはスペースを置きますが、クラス指定でスペースを置くと2つのクラスを指定したことになってしまいます。

このように指定すると、クラス「sample」とクラス「div」が指定された状態になります。

よって、クラス指定する際に単語間のスペースの代わりに「-（ハイフン）」や「_（アンダーバー）」を使うことがよくあります。

この場合はクラス「sample-div」が1つだけ指定された状態になります。

同じことがCSSのセレクタでも言えまして、「-（ハイフン）」や「_（アンダーバー）」を空白に戻すと意味が変わってきます。

上記の場合は「sample-div」で一つのクラスです。

「.sample div」だとクラスsampleを持つ要素の子孫要素のdivを指します。

「-（ハイフン）」や「_（アンダーバー）」も気持ち悪いからと消してはいけません。まったく別の意味になってしまい崩れの原因です。

その他CSSが効かないときはこちらの記事をごらんください。

まとめ

• スペースがない場合はand条件になる。
• スペースがある場合は子孫要素への指定になる。
• 疑似クラスはhtmlセレクタを接続しなくても使える。
• 「>」前後にスペースがあってもなくても意味が変わらないけど、無意味なスペースは使わない方がいい。
• スペースを連続で複数つけても変わらないけど、無意味なスペースは使わない方がいい。
• 全角スペースはダメ。崩れる。
• 「-（ハイフン）」や「_（アンダーバー）」はスペースの代わりにならない。消しちゃダメ。

以上、CSSセレクタ、classにおける空白スペースの意味でした。