CSS初心者がよくやってしまう7つの間違った書き方

半角スペースを全角スペースにしてしまう

CSSを書く際はプロパティのコロン( : )のあとに半角スペースを入れて見やすくすることが多い。

しかし、半角スペースを全角スペースにすると指定したプロパティが適用されないので注意が必要です。

/* <div class="red">red</div> */
.red {
  color:　red;
}

red

VS Codeだと全角スペースはハイライトで表示されるので全角スペースになっていても気づきやすい。

高機能エディタであれば全角スペースの可視化を設定できるようになっているので必ず見えるようにしたほうが良いです。

CSSのプロパティは1つであればセミコロンがなくても適用されるが、複数のプロパティがある場合はセミコロンがないとスコープ内の次のセミコロンの場所までプロパティが読み込まれない。

例えば以下のように「color: green」と書いてしまうと「font-size」と「border」は適用されるが、「color」と「background」が適用されない。

※ たまにセミコロンがない行だけが適用されないと思われている方がいますが、それは間違いです。

.foo {
  font-size: 30px;
  color: green
  background: pink;
  border: 1px solid blue;
}

foo

これはブラウザではセミコロンがないと次のセミコロンまでが値だと認識されて「color: green background: pink;」として読み込まれるためです。

「first-child」は直訳すると「第一子」で兄弟要素のグループの中で最初の要素だけに適用されます。

「.b:first-child」と書いた場合以下のHTMLの例の場合、2つ目のclass="b"に「.b:first-child」が適用されると勘違いされることがあるが、この場合の.bは第二子なので適用されない。

.b:first-child {
  background: lightgreen
}

<ul class="list">
  <li class="a">a</li>
  <li class="b">b</li>
  <li class="b">b</li>
</ul>

第二子の.b部分に適用させたい場合は「:first-child:not(.b) + .b」を追記してください。

.b:first-child,
:first-child:not(.b) + .b {
  background: lightgreen
}

以下のようにdiv配下の子要素がすべてpタグだった場合…

<div class="z">
  <p class="y">y</p>
  <p class="x">x</p>
  <p class="x">x</p>
</div>

:first-of-typeを使用して以下のようにCSSを書けば最初の.xの子要素に適用されると考える人がいますが残念ながらすべて同一のHTMLタグだと適用されません。

.z > .x:first-of-type {
  background: lightgreen;
}

最初の子要素のタグがpタグでなければ適用されます。

<div class="z">
  <h1 class="y">y</h1>
  <p class="x">x</p>
  <p class="x">x</p>
</div>

:emptyは要素のノードまたは文字列が存在しない場合に適用されます。

テキストが空のときに適用されるわけではないので以下のようにHTMLタグや改行コードなどが入っていると適用されません。

.bar:empty {
  width: 10px;
  height: 10px;
  border: 1px solid red;
}

<!-- :emptyが適用されない -->
<div class="bar"><i></i></div>

<!-- :emptyが適用されない -->
<div class="bar">
</div>

1から10のliのうち、4番目から7番目までに背景色を付けたい場合、:nth-childで適用したあとに:nth-last-childで適用を取り消しているコードを見ることがあります。

.n > li:nth-child(n+4) {
  background: #C00;
}
.n > li:nth-last-child(-n+3) {
  background: none
}

:nth-childなどの疑似クラスは組み合わせて書くことが可能なので、以下のように書けばCSSのコードを短く書くことが可能です。

.n > li:nth-child(n+4):nth-last-child(n+4) {
  background: #C00;
}

CSSのコメントは /* */ で囲みます。

 や // を使用するのは間違いです。

たまに最近はCSSでもも使用可能になったという人がいますが、それはJavaScriptのHTML-likeコメントのことでCSSでは現在も使用不可です。

あと // はSass(SCSS)などに慣れているとCSSでもうっかり書いてしまうことがあるので注意が必要です。