ウェブサイトコーディングでよく使用するCSSセレクタのまとめ
最終更新日: Update!!
ウェブサイトコーディングでよく使うHTMLタグとCSSプロパティに続いて、今回はCSSで登場するセレクタ名をまとめていきます。セレクタを活用することで、効率良く幅広いデザインをしていくことが可能になります。同じくウェブサイトコーディングでよく登場するセレクタにスポットを当てて紹介していきたいと思います。またCSSセレクタについてはCSS3に対応した内容で記載しています。
今回はCSSのセレクタについてまとめてみました。セレクタはうまく使うことでCSSを簡略化につながり、後の編集がとても楽になります。ぜひ積極的に使っていきスマートなコーディングを心がけていきましょう。
1. 全称・タイプ・クラスセレクタ
* | 【ユニバーサルセレクタ】すべての要素に適用されます。 |
---|---|
E | 【要素セレクタ】E要素すべてに適用されます。 |
E.クラス名 | 【クラスセレクタ】指定したクラス名をもつ要素に適用されます。 |
E#id名 | 【idセレクタ】指定したid名をもつ要素に適用されます。 |
2. 子孫・隣接・複数セレクタ
E F | 【子孫セレクタ】E要素の子要素・孫要素であるF要素すべてに適用される。 |
---|---|
E>F | 【子セレクタ】E要素の子要素であるF要素すべてに適用される。 |
E+F | 【隣接セレクタ】E要素の直後にあるF要素一つに適用される。 |
E〜F | 【間接セレクタ】E要素の後に登場するF要素すべてに適用される。 |
E,F | 【複数セレクタ】E要素とF要素すべてに適用される |
3. 属性セレクタ
E[foo] | 【属性セレクタ】E要素のfoo属性のものに適用される。 |
---|---|
E[foo=”bar”] | 【属性値セレクタ】E要素のfoo属性かつ値がbarのものに適用される。 |
4. 擬似要素セレクタ
E::before | 【::before擬似要素セレクタ】E要素の直前に要素を生成し適用させる。 |
---|---|
E::after | 【::after擬似要素セレクタ】E要素の直後に要素を生成し適用させる。 |
E::first-line | 【::first-line擬似要素セレクタ】E要素の最初の1行に適用させる。 |
E::first-letter | 【::first-letter擬似要素セレクタ】E要素の最初の1文字に適用させる。 |
5. 擬似クラスセレクタ
E:link | 【:link擬似クラスセレクタ】E要素のリンク先が未訪問の時に適用される。 |
---|---|
E:visited | 【:visited擬似クラスセレクタ】E要素のリンク先が訪問済みの時に適用される。 |
E:hover | 【:hover擬似クラスセレクタ】E要素にマウスカーソルが重なった時に適用される。 |
E:active | 【:active擬似クラスセレクタ】E要素のリンク先をクリックした時に適用される。 |
E:focus | 【:focus擬似クラスセレクタ】E要素の入力欄などにフォーカスされた時に適用される。 |
E:first-child | 【:first-child擬似クラスセレクタ】ある要素に含まれる最初のE要素のみ適用させる。 |
E:last-child | 【:last-child擬似クラスセレクタ】ある要素に含まれる最後のE要素のみ適用させる。 |
E:nth-child(n) | 【:nth-child(n)擬似クラスセレクタ】ある要素に含まれる(最初から)n番目のE要素のみ適用させる。 |
E:only-child | 【:only-child擬似クラスセレクタ】ある要素に含まれるE要素のみ適用させる。 |
E:not(F) | 【:not擬似クラスセレクタ】E要素の中でF要素のみ適用させる。 |
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories