実践でよく使う擬似クラスなどのセレクタまとめ(自分用メモ)動的な実装を行う際は、HTMLの改修やパーツの使い回しが良く発生しますので、できる限りHTMLは統一させておきたいものです。そんな時に擬似クラスはめちゃくちゃ使えますね!!Web業界にすでに15年近くいるので、ie6やie7を非対応にしてよくなり擬似クラスが使えるようになった時には感動ものでした。擬似クラスの種類もすごく増えました。実践でよく使う擬似クラスだけでも覚えておけばかなり便利なので、私がよく使う擬似クラスを自分用メモとしてまとめました。F)要素と要素が直接隣接している場合に適応されます。F)親要素の直接の子要素に適用されます。F)親要素が同じになる兄弟関係の弟に適用されるセレクタです。隣接セレクタと違い間に他の要素が入っていても適応されます。こちらの方が応用が効きますね。:only-child要素内の最初(最後・ひとつ)に書かれている子要素にスタイルが適用されます。:only-of-type要素の同じ子要素の最初(最後・ひとつ)の要素にスタイルを適用します。:first-childと:first-of-typeの違い包括している要素の中での順番の数え方が異なります。包括している要素の中の指定子要素が上から何番目かでみている以降のnth-childには同様にnth-of-typeがありますが、考え方は上記と同様です。red;}奇数番目に適用6、:nth-child(odd)要素の隣接している子要素の奇数番目の要素に適用します。red;}7、:nth-of-type(odd)要素の同じ子要素の奇数番目の要素に適用します。red;}偶数番目に適応8、:nth-child(even)要素の隣接している子要素の偶数番目の要素に適用します。red;}9、:nth-of-type(even)要素の同じ子要素の偶数番目の要素に適用します。red;}n番目に適応10、:nth-child(n)要素の隣接している子要素のn番目の要素に適用します。red;}11、:nth-of-type(n)要素の同じ子要素のn番目の要素に適用します。red;}3番目以降に適応12、:nth-child(n+3)要素の隣接している子要素の3番目以降の要素に適用します。red;}13、:nth-of-type(n+3)要素の同じ子要素の3番目以降の要素に適用します。red;}上から3番目までに適応14、:nth-child(-n+3)要素の隣接している子要素の上から3番目までの要素に適用します。red;}15、:nth-of-type(-n+3)要素の同じ子要素の上から3番目までの要素に適用します。red;}下からn番目に適応16、:nth-last-child(n)要素の隣接している子要素の下からn番目の要素に適用します。red;}17、:nth-last-of-type(n)要素の同じ子要素の下からn番目の要素に適用します。red;}下から3番目以前の要素に適応18、:nth-last-child(n+3)要素の隣接している子要素の下から3番目以前の要素に適用します。red;}19、:nth-last-of-type(n+3)要素の同じ子要素の下から3番目以前の要素に適用します。red;}下から3番目までの要素に適応20、:nth-last-child(-n+3)要素の隣接している子要素の下から3番目までの要素に適用します。red;}21、:nth-last-of-type(-n+3)要素の同じ子要素の下から3番目までの要素に適用します。red;}最後以外の要素に適応22、:not(:last-child)要素の隣接している子要素の最後以外の要素に適用します。red;}23、:not(:last-of-type)要素の同じ子要素の最後以外の要素に適用します。2018.09.04私自身のメモとしてウェブ系カテゴリも今後追加していきます。2018.09.08ターミナルでよく使うコマンドとGitでのよく使う作業の流れを自分のメモ用にまとめました。コメントをキャンセルメールアドレスが公開されることはありません。(20)プロフィール都内在住30代小学生と保育園児の子を持つワーママです。最近やっと保育園の二ヶ所送迎から解放され育児にも少しだけ余裕がもてるようになりました。