CSSのnth-child(2n)について

Question

前提・実現したいこと

nth-child(2n)を反映させたいのですが上手くいきません。

発生している問題・エラーメッセージ

コード
nth-child(2n)

```2nがエディタ上で白くなってしまいます。

### 該当のソースコード

見本（少し違いますが，色をテレコにしたいです）
![イメージ説明](5096bd2e939e3e3c7831ddef63f50989.png)


何度やっても，反映されません。
![イメージ説明](d9b7e39044f068f80fb1073c22d9a9bd.png)

![イメージ説明](5fea8cd36ecfd4b79e24e7640c468099.png)

### 試したこと
ネットで調べたり，過去の情報を閲覧させていただきました。

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

↓↓このようにしたいです。
![イメージ説明](a789b9462b00831039de6bc54b97e866.png)
打ち込むとこのような感じです。（真似をして作っています。）
![イメージ説明](bd407c3185ebe043ba156c9b1a45dd08.png)
↓こうなってしまいます。（変化しません）
![イメージ説明](b54942088027427b8804d6a1158dbec8.png)

Comments

[K_3578]

ソースコードはMarkDownの<code>ブロック内にテキストで貼り付けて提示頂けると助かります。
画像で提示されるとコピペが出来ないので。

[azusamuu]

変更させていただきまいた。

[K_3578]

言い方が悪かったですかね。画像だとコピペが出来ないので言外書かれているエディタ(多分VScode？)
に書いているソースを全選択して<code>ブロック内に貼り付けて欲しいのです。
個人情報であったり、見られたくない物が入っているならメタ要素で隠してくれて構わないので。

追記
変更させていただきまいた。→変更させていただきました。

こういうミス一つでプログラミングは詰むことになるので日常から気をつけてみて下さい。
老婆心からの忠告です。

Answer 1

動画の内容を真似て書いてるんだとしたら

li:nth-last-child(2n) { /*お手本には「-last」はないですね。*/
   background-color:grey;

追記

li: nth-last-child(2n) {
 /*↑の｢li:｣と｢nth-last-child｣の間に半角スペースが空いてるように見えます。*/

こちらから空いてるように見えるだけなので実際空いてるか分かりません。追記修正依頼にもお願いしましたが、ソースコードを丸々コピペしてテキストで追記してください。

Comments

[azusamuu]

できないまま，学習を次に進めているので，画像が少し異なります。申し訳ありません。
（）内の２nを反映させることができません。
2n+1なども反映されません。よろしくお願いします。

[K_3578]

できないまま進めるのがまず良くないですが、恐らく上記でないならmai1210さんの回答が解だと思います。
一応自分の回答にも追記しておきます。

[azusamuu]

解決いたしました。丁寧にご回答いただきありがとうございました。

[K_3578]

解決されたようで何よりですが、原因が半角スペースだったのならばBAは最初に気付かれたmai1210さんの回答に付けてあげて欲しいです。自己回答されるのは全然構わないので。

[mai1210]

K_3578さん
お気遣いありがとうございます。
使っているエディタが保存しないと反映されないことに気付かず…とのことなので、自己解決で全然構いません。何にせよ解決して良かったです！

[K_3578]

mai1210さんが良ければ自分からは特に言うことないです。
こちらこそ出過ぎた真似だったかもしれません。申し訳ないです。
私自身は「正しい回答」はmai1210さんのものだと思うので高評価押させて頂きます。

Answer 2

「:」の後ろの半角スペースを削除すると解消しないでしょうか。

Comments

[azusamuu]

すみません，ならないです。

[mai1210]

検証したいため、style.cssの内容をまるまる、画像ではなくマークダウン形式で質問内に記述していただけないでしょうか。

画像を見た限りだと「li:」の後ろに半角スペースが入っているように見えます。擬似クラス・擬似要素を使う場合はそこにスペースが入っているとセレクタとして機能しません。

[azusamuu]

解決いたしました。丁寧にご回答いただきありがとうございました。

Answer 3

K_3578様のこれに尽きると思うのだけども…

/お手本には「-last」はないですね。/

変わり種として、下のコードのようにも指定できますよー

li:nth-child(odd){
  background: red;
}
li:nth-child(even){
  background: blue;
}

奇数、偶数で分けるやり方です。
色はまぁアレだと思うけども、変わりませんかね？

これで変われば(2n)も効くかと思いまする。

画像追加
teratailで試した画像貼っておきます。※色はアレですがっ

Comments

[azusamuu]

解決いたしました。丁寧にご回答いただきありがとうございました。

Answer 4

丁寧にご回答いただきありがとうございました。半角スペースを消した後，保存し，反映させると作りたかった形に仕上げる事ができました。
問題は，実はエディタをVSコードから，sublime textに変更した後で，自動保存されないということが分かっていませんでした。

３名の方にご丁寧にご回答いただき，とてもありがたかったです。