CSSのfirst-childやlast-childが効かない原因と解決方法マンガでわかるホームページ作成ホームへCSSのfirst-childやlast-childが効かない原因と解決方法2020年02月29日こんにちは。ホームページを作り続けて9年になります。:last-childです。ある条件により効かないことがあります。CSSのfirst-childやlast-childが効かない原因と解決方法を説明します。結論:first-of-typeや:last-of-typeを使う以下で詳しく説明します。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。「要素の最後のp」に対する指定ができます。first-childやlast-childとどう違うのでしょうか。失敗例と合わせて説明します。blue;}上記の「p:first-child」は「要素の一番目のp」ではなく、「要素の一番目がpなら」という指定です。「p:last-child」も同様に「要素の最後のp」ではなく、「要素の最後がpなら」という指定です。first-of-typeとfirst-childは微妙に仕様が異なるので使い分けが肝心です。blue;}「親要素+半角スペース+疑似クラス」のように指定するとタグに関わらず、○番目の要素に対する指定ができます。上記にも当てはまらない場合、他が原因かもしれません。↓こちらの記事を参考にしてみてください。CSSが効かない原因と回避方法【よくあるケアレスミス】CSS効かない、htmlが崩れたときは以下に当てはまらないかチェックしてみてください。この記事を読むほかにも疑似要素などまとめています。主要ブラウザで使えるセレクタ等の一覧です。主要ブラウザで使えるセレクタ等の一覧です。CSSの記述例と実行例もあります。:last-childを使う以上、CSSのfirst-childやlast-childが効かない原因と解決方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。