ホームへ

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

2020年10月18日

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

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

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

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

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

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

結論

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

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

E.A(スペースなし)

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

  • クラスAのliタグ
  • クラスBのliタグ
  • ただのliタグ
  • ただのliタグ
<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がある要素となります。

  • クラスAのliタグ
  • クラスBのliタグ
  • ただのliタグ
  • ただのliタグ
<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の条件に合うものとなります。

  • ただのliタグ
  • ただのliタグ
  • ただのliタグ
  • ただのliタグ
<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の条件に合うすべてのセレクタとなります。

  • ただのliタグ
  • ただのliタグ
  • ただのliタグ
  • ただのliタグ
<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 :first-child

↓同じ

ul *:first-child

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

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

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

ul>li

↓同じ

ul > li

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

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

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

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

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

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

ul li

↓同じ

ul          li

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

全角スペースはダメ

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

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

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

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

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

<div class="sample div">

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

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

<div class="sample-div">

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

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

.sample-div

↓違う

.sample div

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

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

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

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

まとめ

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

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

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ