CSSセレクタ多すぎ覚えられない!CSS3対応セレクタリストを作ってみた
CSSセレクタって本当にたくさんあるじゃないですか。それらを全部覚えとくなんて無理な話じゃないですか┐(´ー`)┌
というわけで備忘と、学習目的でセレクタのリストを作ってみた。CSS3対応。サンプル少なくてすいません。こんなのあるんだ的な気づきとなれば幸いです。
以下のフォーマットでセレクタの説明を記載する。
セレクタの記述方法
そのセレクタが指す対象(スタイルが適用される対象)
サンプルコード
というわけで計36個!!のセレクタリストのはじまりはじまり~
一般的なセレクタ
要素名
指定した要素
p { font-size: 14px; }
*
全要素
* { font-size: 15px; }
.class
指定したクラスを含む要素
.warning { color: red; }
#id
指定したIDを含む要素
#subtitle { font-size: 20px; }
:状態指定系セレクタ(擬似クラス/擬似要素)
要素名:link
未訪問リンクのアンカーである要素
a:link { color: blue; }
要素名:visited
訪問済みリンクのアンカーである要素
a:visited { color: lightblue; }
要素名:hover
マウスが乗っている要素
a:hover { cursor: pointer; }
要素名:active
クリックしてアクティブになった要素
p:active { color: red; }
要素名:focus
フォーカスされている要素
input:focus { border: 1px solid orange; }
要素名:lang()
htmlタグのlang="--"とlang(--)の言語が一致した時の要素
p:lang(en) { font-family: "MS ゴシック",sans-serif; } p:lang(ja) { font-family: "MS 明朝",sans-serif; }
要素名:not()
()で指定されたセレクタに該当しない要素
p:not(.warning) { color: black; }
要素名:checked
ラジオボタン、チェックボックスにチェックが入った時の要素
input:checked + label { text-decoration: line-through; }
要素名:disabled
disabled属性を持つ要素
textarea:disabled { background-color: gray; }
要素名:enabled
enabled属性を持つ要素
textarea:enabled { background-color: white; }
:n番目指定系セレクタ(擬似クラス/擬似要素)
要素名:first-line
最初の1行(2行目には適用されない)
p:first-line { font-size: 16px; }
要素名:first-letter
最初の1文字
p:first-letter { font-size: 20px; }
要素名:first-child
最初の子要素
li:first-child { color: red; }
要素名:last-child
最後の子要素
li:last-child { color: red; }
要素名:only-child
唯一の子要素である要素
li:only-child { color: red; }
要素名:nth-child(n)
子要素のうち上からn個目の要素(もしその要素が指定した要素でなかったら適用されない)
p:nth-child(2) { color: red; }
要素名:first-of-type
最初の指定した子要素
p:first-of-type { color: red; }
要素名:last-of-type
最後の指定した子要素
p:last-of-type { color: red; }
要素名:only-of-type
唯一の子要素である指定した要素
p:only-of-type { color: red; }
要素名:nth-of-type(n)
子要素のうち上からn個目の指定した要素
p:nth-of-type(2) { color: red; }
※"-child"と"-of-type"の違い
"-child"は要素を考慮せず、最初にある要素、最後にある要素、n番目にある要素を取得する。例を見てもらったほうが早いかな。以下は全てchild条件で取得したタグが指定したタグとあわないためNGとなる。
<div id="menu"> <p>aaa</p> <div>bbb</div> <div>ccc</div> <p>ddd</p> </div> <style> #menu > div:first-child { color: red; } /*NG*/ #menu > div:last-child { color: red; } /*NG*/ #menu > p:nth-child(2) { color: red; } /*NG*/ </style>
一方、"-of-type"は指定した要素で、最初にある要素、最後にある要素、n番目にある要素を取得する。以下は先ほどと同じHTMLであるが今度は全てOKとなる。
<div id="menu"> <p>aaa</p> <div>bbb</div> <div>ccc</div> <p>ddd</p> </div> <style> #menu > div:first-of-type { color: red; } /*OK*/ #menu > div:last-of-type { color: red; } /*OK*/ #menu > p:nth-of-type(2) { color: red; } /*OK*/ </style>
before,afterセレクタ
要素名:before
要素の直前(contentプロパティで文字、引用符、画像などを挿入可)
h1:before { content: "「"; }
要素名:after
要素の直後(contentプロパティで文字、引用符、画像などを挿入可)
h1:after { content: "」"; }
属性セレクタ
要素名[属性名]
指定した属性を持つ要素
a[target] { color: red; }
要素名[属性名="属性値"]
指定した属性を持ち、値が属性値と等しい要素
a[target="_blank"] { color: red; }
要素名[属性名^="属性値"]
指定した属性を持ち、値が属性値から始まる要素
a[href^="https://"] { color: red; }
要素名[属性名$="属性値"]
指定した属性を持ち、値が属性値で終わる要素
a[href$=".com"] { color: red; }
要素名[属性名*="属性値"]
指定した属性を持ち、値に属性値を含む要素
a[href*="google"] { color: red; }
複数セレクタの組み合わせ
,で並べたセレクタ全て
h1,h2 { color: red; }
セレクタAの子孫要素であるセレクタB
#subtitle span { color: red; }
セレクタAの子要素であるセレクタB(孫要素は含まない)
ol > li { color: red; }
セレクタAの直後にあるセレクタB
input + label { color: red; }
セレクタAより後にあるセレクタB(子孫は含まない)
h1 ~ p { color: red; }
上記のサンプルコードを以下のHTMLへ。h1要素の後にくる".warning"クラスを持つ要素にのみスタイルが適用される。
<p class="warning">aaa</p> <h1>AAA</h1> <p class="warning">aaa</p>
いやー本当にたくさんある。セレクタを理解しておくとid、classの山に埋もれずにすみそう。というわけでCSSセレクタリストは以上。