これらの順番が違っていたり間でスペースが空いていたらうまく効いてくれません。ほとんど同じなのになんで?っと思ってしまいますよね。これは擬似クラスと擬似要素の名前の意味を理解すればなんとなく答えは見えてきます。擬似クラスと擬似要素。ここまで読んでいる方なら聞いたことはあるとおもいますが、それぞれどういったものがあるか知っていますか?擬似クラス:hover:link:visited:active:first-child:last-child擬似要素:before:after:first-letter:first-line代表的なところをあげるこんな感じだと思うのですが、擬似クラスと擬似要素ではどんな意味の違いがあるのでしょう。先に答えをいってしまうと、擬似クラスは指定したもの全体に効力を発揮し、擬似要素は一部の要素のみに効力を発揮します。わかりづらいと思うので例をあげますね。例題として下のようなHTMLを用意しました。(見やすくするためにlist-styleを外しています。)※個人的にはサイが一押しです。<ul><li>パンダ</li><li>ライオン</li><li>ゴリラ</li><li>サイ</li></ul>擬似クラスだとどういうことができる?擬似クラスの:first-childでフォントカラーを変えてみましょう。li:first-child{color:lightblue;}そうすればどうでしょう。最初のli全体の色がかわりました。擬似要素だとどういうことができる?次は擬似要素:beforeで名前の前に矢印をいれてみましょう。li:before{content:'→';}文字の横(一部)に矢印がはいりました。擬似要素は、もともとのliに何も変化を加えること無く別の要素が追加されましたね。擬似要素はそれ自体に実態があります。(実際は「擬似」なのでないのだけど。)擬似クラスに比べるとモノとしての実感がありますよね。擬似クラスはもともとあるものを変更する。擬似要素はもともとあるものに要素を加える。何となく擬似クラスと擬似要素の違いがわかってきました。ここでは擬似要素は、要素を加えるという風に表現していますが、実際のところは違います。:first-letterだと、別に要素を加えるわけではなく一文字目のテキストにあたります。擬似要素が一部の要素というのをわかりやすく表現するためにあえてこのように書きました。擬似クラスと擬似要素を複数使う場合さてここで本題の擬似要素と擬似クラスを複数指定する方法をみてみましょう。先ほどの例であげたHTMLで、1つ目の色を変えたliタグにだけ矢印をつけたいとします。そんな時の記述方法は冒頭でも述べた...○:擬似クラス:擬似要素この順番です。言葉で説明するなら、「場所を絞り込んで、その場所に要素を追加する」です。li:first-child{color:lightblue;}li:first-child:before{content:'→';}まず擬似クラス(first-child)で場所を指定してあげて、そのあと擬似要素(before)を追加する。いうイメージでしょうか。クラスと要素という言葉の違いを理解していれば、この順番になることに納得できるはずです。あとがきいかがでしたか?擬似クラスと擬似要素。どちらも「擬似」という言葉なので混同して同じものと勘違いしている方もいたかもしれません。その名前の意味を考えてみると、今回のように擬似属性を複数指定する場合に、どちらを先に書くべきなのか迷わずにすみます。「場所を絞り込んで、その場所に要素を追加する」この言葉をイメージしてみたら案外しっくりくるのではないでしょうか。SPONSORLINKWEBサイト制作cssこの記事をシェアツイート14シェアはてブ18送るPocket22FOLLOWFeedly新作!シンプルかつパワフルWPテーマ「スワロー」SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。[...]RECOMMEND2016.08.25無料でホームページがつくれるJimdo。WordPressをインストールする方法2015.05.22プラグイン不要!固定ページで投稿者の一覧リストを表示させる2015.02.02無料ホームページ作成サービスで作るサイトは『実は無料ではない』かもね。US矢野ヨシキ香川県(うどん県)にてフリーランスWEBデザイナー/ディレクターとして活動。小規模なWEBサイト制作を得意とし、コンセプト設計からデザイン、コーディング、撮影にいたるまでのすべてをこなします。地方の良さを全国に広めていくお手伝いをしていきたいと思っています。擬似クラスと擬似要素を複数指定する方法WPテーマ「スワロー」シンプル。このサイトで使っているWordPressテーマ、SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。