Popup(3)photoshop(1)php(1)pug(1)seo(2)shopify(5)slick(5)swiper(6)wordpress(6)脱jQuery(3)show_chartFXfxfxタグ一覧トレード戦略(16)トレード記録(16)手法(2)book日記diarydiaryタグ一覧Apps(1)ツール(1)ライフハック(1)mailお問い合わせcontactHOMEwebcssセレクタや擬似クラスを一通りまとめてみたwebcssセレクタや擬似クラスを一通りまとめてみた公開日:2019/07/29css知ってそうで知らないcssセレクタや擬似クラス。コーディングは始めた当初は知ってるセレクタや擬似クラスって5,6個ぐらいでした。}などが基本ですかね。調べてみたら意外にたくさんあるcssセレクタや擬似クラスを今回はまとめていきます。※英語の訳はGoogle先生頼りです。}」は全ての要素に適用してくれます。}」だとクラス名「foo」の子要素全てに適用してくれます。}」はE要素だけに適用してくれます。これはp要素にだけ適用されます。ちなみにこのページは大体「E」って使いますけど、Elementの「E」です。fooを持ったE要素にだけ適用してくれます。私はあまり使わないのですが、どういう時に便利に使えるんですかね〜。誰か教えてくれたら嬉しいです。私は上の「E[foo]」よりこっちをよく使います。このBlanksで言えば、a[target="_blank"]は全部別ウィンドウのアイコンが表示されるようにcssに記述しています。"bar"と書いてあり、"foo"の属性値は"bar"以外にも無くてはいけないのかなと思いましたが、"foo"の属性値が"bar"のみの時でも適用されるようです。foo="bar〇〇"></e>の要素に適用されます。bar〇〇"></e>には適用されません。「E[foo$="bar"]」:fooの属性値"bar"で終わるE要素これは上のE[foo^="bar"]とは逆でfooの属性値"bar"で終わるのものに適用されます。「E[foo*="bar"]」:fooの属性値に"bar"が含まれるE要素E[foo~="bar"]と間違えそうですが、少し違います。E[foo*="bar"]の場合は下記、全てに適用されます。foo="abarth"></e>これはfooの属性値に文字列として"bar"が含まれるものに適用されるんですね。何だか少しややこしくなってきました。E[foo~="en"]と比較したものを作ってみました。E[foo|="en"]が適用されれば赤色に、E[foo~="en"]が適用されればアンダーラインが付きます。CodePen.確認してみると、わかりますが「E[foo|="en"]」は「foo="en"」もしくは「foo="en-〇〇"」だと適用されるようです。「E:root」:ルート要素:rootの擬似クラスは文書のルート要素を示します。HTML文書ではこれはhtml要素になります。「E:nth-child(n)」:親のn番目の子要素En番目の子要素を指定して、stylesheetを適用させることができる擬似クラスです。E:nth-child(odd)は奇数番目の子要素に、E:nth-child(even)は偶数番目の子要素に、stylesheetを適用させることができます。「E:nth-last-child(n)」:最後の要素から数えて、親のn番目の子要素E最後の要素からn番目の子要素を指定して、stylesheetを適用させることができる擬似クラスです。CodePen.「E:nth-of-type(n)」:要素Eのn番目の兄弟要素En番目の兄弟要素を指定して、stylesheetを適用させることができる擬似クラスです。(n)の箇所は上記「E:nth-last-child(n)」のデモと同じような書き方で指定できます。「E:nth-last-of-type(n)」:最後の要素から数えて、要素Eのn番目の兄弟要素E最後の要素からn番目の兄弟要素を指定して、stylesheetを適用させることができる擬似クラスです。(n)の箇所は上記「E:nth-last-child(n)」のデモと同じような書き方で指定できます。「E:first-child」:最初の子要素E最初の子要素Eだけにstylesheetを適用させることができる擬似クラスです。E:nth-child(1)と同義です。「E:last-child」:最後の子要素E最後の子要素Eだけにstylesheetを適用させることができる擬似クラスです。E:nth-last-child(1)と同義です。「E:first-of-type」:最初の兄弟要素E最初の兄弟要素Eだけにstylesheetを適用させることができる擬似クラスです。E:nth-of-type(1)と同義です。「E:only-child」:親要素の子要素がE要素のみ親要素の子要素がE要素1つだけの場合にE要素にstylesheetが適用される擬似クラスです。「E:only-of-type」:E要素の兄弟要素の中で、唯一のE要素E要素の兄弟要素の中で、E要素が1つだけの場合にE要素にstylesheetが適用される擬似クラスです。「E:empty」:空のE要素E要素の中身が空の時に適用させる擬似クラスです。改行が入った場合でも適用されなくなるので、注意が必要です。「E:link」:ハイパーリンクを持つE要素で、まだ閲覧者がハイパーリンク先に訪問していないE要素E要素にハイパーリンクが設定されていて、そのハイパーリンク先にブラウザを閲覧している人がまだ訪問していない場合に適用される擬似クラスです。「E:visited」:ハイパーリンクを持つE要素で、閲覧者がハイパーリンク先に訪問しているE要素E要素にハイパーリンクが設定されていて、そのハイパーリンク先にブラウザを閲覧している人が訪問している場合に適用される擬似クラスです。「E:hover」:マウスオーバーしているE要素E要素にマウスオーバーしている時に適用される擬似クラスです。「E:active」:アクティブなE要素E要素がアクティブ時に適用される擬似クラスです。これではよく分かりません。:active擬似クラスの説明については、参考サイトに下記のように書いてあります。thereof.これには例で「ユーザーがマウスボタンを押して離すまでの間」と書いてあります。「E:focus」:フォーカスされているE要素E要素にフォーカスされている時に適用される擬似クラスです。「E:target」:参照URIの対象となるE要素こちら少し理解しづらかったので、デモを作成しました。「参照元」をクリックしたら「ターゲット要素」が変化します。CodePen.「E:lang(fr)」:langの属性値が「fr」のE要素E要素のlangの属性値によってstylesheetを変更します。「E:enabled」:有効なE要素enabledの属性を持ったE要素、またはenabledの属性値がtrueを持ったE要素に適用される擬似クラスです。「E:disabled」:無効なE要素disabledの属性を持ったE要素、またはdisabledの属性値がtrueを持ったE要素に適用される擬似クラスです。type="checkbox">がチェックされた時に適用される擬似クラスです。「E::first-line」:E要素の最初の行E要素の最初の行に適用される擬似クラスです。「E::first-letter」:E要素の最初の一文字E要素の最初の一文字に適用される擬似クラスです。「E::first-line」と「E::first-letter」のデモを作成しました。CodePen.「E::before」:E要素の前に生成されたコンテンツE要素内のコンテンツの前にコンテンツを挿入する擬似クラス。下記のようになります。content:'beforeコンテンツ';}</style><p>beforeコンテンツ【コンテンツ】</p>「E::after」:E要素の後に生成されたコンテンツE要素内のコンテンツの後にコンテンツを挿入する擬似クラス。「E.warning」:class名がwarningのE要素E要素のclass名がwarningの場合に適用されるセレクタ。「E#myid」:id名がmyidのE要素E要素のid名がmyidの場合に適用されるセレクタ。F:E要素の子孫要素FE要素の子孫要素のF要素に適用されるセレクタ。F:E要素の子要素FE要素の子要素のF要素に適用されるセレクタ。F:E要素直後の兄弟要素FE要素直後の兄弟要素Fに適用されるセレクタ。F:E要素以降の兄弟要素FE要素以降の兄弟要素Fに適用されるセレクタ。調べてみると結構知らないものがありました。html/cssコーディングってわりとすぐできるようになるんですけど、cssの設計ってすごく難しいんですよね。今回調べたことを利用してより良いhtml/cssコーディングをしていきたいです。