0%

Designデザインワークショップ

Posted:2015.04.23

ウェブサイトコーディングでよく使用するCSSセレクタのまとめ

ウェブサイトコーディングでよく使うHTMLタグとCSSプロパティに続いて、今回はCSSで登場するセレクタ名をまとめていきます。セレクタを活用することで、効率良く幅広いデザインをしていくことが可能になります。同じくウェブサイトコーディングでよく登場するセレクタにスポットを当てて紹介していきたいと思います。またCSSセレクタについてはCSS3に対応した内容で記載しています。

 

 

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要素のみ適用させる。

 

 

今回はCSSのセレクタについてまとめてみました。セレクタはうまく使うことでCSSを簡略化につながり、後の編集がとても楽になります。ぜひ積極的に使っていきスマートなコーディングを心がけていきましょう。

 

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】