CSSにおけるセレクタとは
セレクタとは、スタイルを適用する対象を示すものです。以下の通り、様々なセレクタがあります。
全称セレクタ
全てのHTML要素に対して適用するセレクタです。*(アスタリスク)で表します。
* {
color:red;
}
HTML要素を指定するセレクタ
HTMLの要素に対して適用するセレクタです。
p {
color:red;
}
HTMLの要素をスペースを空けて並べて記載すると、子孫セレクタとなります。以下の場合、p要素内のspan要素にのみ適用されます。
p span{
color:red;
}
idを指定するセレクタ
HTML内のタグにidを指定し、その指定した要素に対してスタイルを適用します。CSSにおいてidは#(シャープ)で表します。
~ HTML ~
<p id="id1">TEST</p>
~ CSS ~
#id1 {
color:red;
}
classを指定するセレクタ
HTML内のタグにclassを指定し、その指定した要素に対してスタイルを適用します。CSSにおいてclassは.(ピリオド)で表します。
~ HTML ~
<p class="class1">TEST</p>
~ CSS ~
.class1 {
color:red;
}
その他様々なセレクタ
直属の子要素のみに適用する(孫要素には適用しない)セレクタ
>で要素をつなげてセレクタを指定すると、直属の子要素のみに適用するセレクタになります。この場合、p要素の子要素のspan要素にだけ適用され、孫要素のspan要素には適用されません。
p > span {
color:red;
}
属性セレクタ
HTML内の要素に独自の属性を作成し、その属性に対して適用するセレクタです。CSS内では[]で表します。
~ HTML ~
<p test="test">TEST</p>
~ CSS ~ 属性のみ指定するパターン
p[test] {
color:red;
}
~ CSS ~ 属性と値の両方を指定する指定するパターン
p[test="test"] {
color:red;
}
疑似クラス
マウスオーバー等、何等かのアクションによる条件下においてのみ適用されるセレクタです。
:link 未訪問のリンク
a:link {
color:red;
}
:visited 訪問済のリンク
a:visited {
color:red;
}
:hover マウスオーバー
a:hover {
color:red;
}
カーソルをかざしただけでクリックしていない状態です。PCではおなじみのマウスオーバーですが、
スマホ等のタッチパネルではうまく動作しません。スマホのタッチ考慮は、現状ではJQueryで行います。
:active アクティブ
a:hover {
color:red;
}
要素がクリックされたりタブキーによる遷移により選択状態になった時です。
:forcus フォーカス
a:active {
color:red;
}
主にinput等フォーム系のテキストエリアでテキストを入力するカーソルが点滅する状態になった時です。
:first-child 子要素の最初の要素
ul:first-child {
border-top:none;
}
最初の子要素です。主にulに設定して各liの境界線を書くが一番上のliの上部の線は必要ないという場合に利用します。
:last-child 子要素の最後の要素
ul:last-child {
border-bottom:none;
}
疑似要素
文字の前後に何等かの定型文字を追加する場合に利用します。
:before
p:before {
content:"\";
}
:after
p:after {
content:".";
}
セレクタの優先度
同一のセレクタを重複して適用した場合、コードの記載順で一番最後に記載したスタイルが適用されます。しかし違うセレクタから間接的な継承によってスタイルが重複して適用された場合は以下の表の加算点数が高いスタイルが優先されます。
セレクタ | 例 | 加算点数 |
!important | p {color:red !important;} | 最優先 |
インラインスタイルシート | <p style="color:red;"> | 1000 |
id | #id {color:red;} | 100 |
class、属性セレクタ、疑似クラス | .class {color:red;} | 10 |
要素、疑似要素 | p {color:red;} | 1 |
全称セレクタ | * {color:red;} | 0 |
例えば p #id{color:red;}のようにセレクタが重複して利用されている場合は、p=1 + #id=100 =101 と点数化されます。