Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

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; }


複数セレクタの組み合わせ


セレクタA,セレクタB


,で並べたセレクタ全て

h1,h2 { color: red; }


セレクタA セレクタB


セレクタAの子孫要素であるセレクタB

#subtitle span { color: red; }


セレクタA > セレクタB


セレクタAの子要素であるセレクタB(孫要素は含まない)

ol > li { color: red; }


セレクタA + セレクタB


セレクタAの直後にあるセレクタB

input + label { color: red; }


セレクタA ~ セレクタB


セレクタ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セレクタリストは以上。