知ってそうで知らないcssセレクタや擬似クラス。コーディングは始めた当初は知ってるセレクタや擬似クラスって5，6個ぐらいでした。（いくら何でも知らなすぎだろ、、笑）
p{ /*stylesheet*/ }や、.foo{ /*stylesheet*/ } や#foo{ /*stylesheet*/ }などが基本ですかね。
調べてみたら意外にたくさんあるcssセレクタや擬似クラスを今回はまとめていきます。
参考はSelectors Level 3です。
※英語の訳はGoogle先生頼りです。
「*」:全ての要素
「*{ /*stylesheet*/ }」は全ての要素に適用してくれます。
「.foo *{ /*stylesheet*/ }」だとクラス名「foo」の子要素全てに適用してくれます。
「E」:E要素
「E{ /*stylesheet*/ }」はE要素だけに適用してくれます。
具体例は「p{ /*stylesheet*/ }」などです。これはp要素にだけ適用されます。
ちなみにこのページは大体「E」って使いますけど、Elementの「E」です。
「E[foo]」:属性fooを持ったE要素
属性 fooを持ったE要素にだけ適用してくれます。
私はあまり使わないのですが、どういう時に便利に使えるんですかね〜。
誰か教えてくれたら嬉しいです。
「E[foo="bar"]」:属性fooの属性値が"bar"であるE要素
私は上の「E[foo]」よりこっちをよく使います。
例えばこのBlanksで言えば、a[target="_blank"]は全部別ウィンドウのアイコンが表示されるようにcssに記述しています。
「E[foo~="bar"]」:属性fooの中に属性値"bar"が含まれるE要素
参考サイトには
an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"
と書いてあり、"foo"の属性値は"bar"以外にも無くてはいけないのかなと思いましたが、"foo"の属性値が"bar"のみの時でも適用されるようです。
「E[foo^="bar"]」:fooの属性値"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"]の場合は下記、全てに適用されます。
<e foo="bar"></e> <e foo="bar-item"></e> <e foo="item-bar"></e> <e foo="abarth"></e>
これはfooの属性値に文字列として"bar"が含まれるものに適用されるんですね。
「E[foo|="en"]」:foo属性に"en"で始まる（左から）ハイフンで区切られた値のリストを持つE要素
何だか少しややこしくなってきました。
E[foo~="en"]と比較したものを作ってみました。
E[foo|="en"]が適用されれば赤色に、E[foo~="en"]が適用されればアンダーラインが付きます。
See the Pen YEKLzm by blanks (@blanks-site) on CodePen.
確認してみると、わかりますが「E[foo|="en"]」は「foo="en"」もしくは「foo="en-〇〇"」だと適用されるようです。
「E:root」:ルート要素
:rootの擬似クラスは文書のルート要素を示します。HTML文書ではこれはhtml要素になります。
「E:nth-child(n)」:親のn番目の子要素E
n番目の子要素を指定して、stylesheetを適用させることができる擬似クラスです。
E:nth-child(odd)は奇数番目の子要素に、E:nth-child(even)は偶数番目の子要素に、stylesheetを適用させることができます。
「E:nth-last-child(n)」:最後の要素から数えて、親のn番目の子要素E
最後の要素からn番目の子要素を指定して、stylesheetを適用させることができる擬似クラスです。
See the Pen E:nth-child(n),E:nth-last-child(n) by blanks (@blanks-site) on CodePen.
「E:nth-of-type(n)」:要素Eのn番目の兄弟要素E
n番目の兄弟要素を指定して、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擬似クラスの説明については、参考サイトに下記のように書いてあります。
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.
これには例で「ユーザーがマウスボタンを押して離すまでの間」と書いてあります。
「E:focus」:フォーカスされているE要素
E要素にフォーカスされている時に適用される擬似クラスです。
「E:target」:参照URIの対象となるE要素
こちら少し理解しづらかったので、デモを作成しました。
「参照元」をクリックしたら「ターゲット要素」が変化します。
See the Pen 「E:target」 by blanks (@blanks-site) on 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要素に適用される擬似クラスです。
「E:checked」:チェックされたE要素
「E::first-line」:E要素の最初の行
E要素の最初の行に適用される擬似クラスです。
「E::first-letter」:E要素の最初の一文字
E要素の最初の一文字に適用される擬似クラスです。
「E::first-line」と「E::first-letter」のデモを作成しました。
See the Pen E::first-line、E::first-letter by blanks (@blanks-site) on CodePen.
「E::before」:E要素の前に生成されたコンテンツ
E要素内のコンテンツの前にコンテンツを挿入する擬似クラス。
例えば下記のようになります。
stylesheet適用前
<p>【コンテンツ】</p>
stylesheet適用後
<style type="text/css" media="screen">
E::before{
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の場合に適用されるセレクタ。
E F:E要素の子孫要素F
E要素の子孫要素のF要素に適用されるセレクタ。
E > F:E要素の子要素F
E要素の子要素のF要素に適用されるセレクタ。
E + F:E要素直後の兄弟要素F
E要素直後の兄弟要素Fに適用されるセレクタ。
E ~ F:E要素以降の兄弟要素F
E要素以降の兄弟要素Fに適用されるセレクタ。
あらためて調べてみると結構知らないものがありました。調べてよかった。
html/cssコーディングってわりとすぐできるようになるんですけど、cssの設計ってすごく難しいんですよね。今回調べたことを利用してより良いhtml/cssコーディングをしていきたいです。