1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

プログラミング入門講座⑤「CSS〜セレクタの使い方〜」

CSS セレクタ
Pocket

セレクタ(基礎編)

プログラミング入門講座③「CSSとは〜HTMLとCSSを紐づける方法〜」で、ID、classを利用してHTMLとCSSを紐づけるセレクタを作るとお伝えしました。ここでセレクタについてもう少し触れておきます。まず、CSSをこれから始める方に知っておいてもらいたいことはこれです。

  1. ID、class、要素名、全称セレクタ、疑似要素がセレクタに使える。
  2. セレクタは複数組み合わせられる。
  3. セレクタには優先順位がある。

ID、class、要素名、全称セレクタ、疑似クラスがセレクタに使える

ID、classがセレクタに利用できるのは前述しましたが、他に要素名(タグの名前)、全称セレクタ、疑似要素がセレクタに使用できます。

要素名を使ったセレクタ

<記述例>

要素名を使ったセレクタは上記のようになります。書式はセレクタの先頭にドット・シャープなどをつけずそのまま、
タグの名前{ 宣言 }となります。この場合、セレクタに指定したタグの要素すべてにスタイルが適用されます。主に、CSSの初期化(プログラミング入門講座⑥にて後述)、ページ全体の体裁を整える場合、WordPressなどを使ったコーディングの簡略化のために使用します。

全称セレクタ(ユニバーサルセレクタ)

<記述例>

セレクタに*(アスタリスク)一文字だけを指定した物を全称セレクタと呼びます。これは、ページ内のすべての要素にスタイルを適応するものです。主に、CSSの初期化に使われますが、HTMLのすべての要素でいちいち呼び出される分、表示速度の低下につながるという意見もあり、最近ではやや搭乗の機会が減ってきました。ですが、例えばデバッグのため一時的にすべての要素に枠線をつけるときなど、大変便利なセレクタでもあります。

擬似クラス

疑似クラスとは、要素が特定の状態になった時にだけ機能するセレクタです。例の場合、aタグの要素にマウスが乗った(hover)時にだけ、スタイルが発動します。疑似クラスには:hover、:visited、:first-childなどがありますが、一番よくつかわれるのはリンクに設置する:hoverです。他の疑似クラスについてはここでは割愛します。

セレクタは複数組み合わせられる

セレクタは複数組み合わせることができます。
<記述例①>

セレクタを、半角スペースを空けて2つ以上並べるて指定するものを子孫セレクタと呼びます。これは、2つのセレクタが入れ子になっている場合にだけ機能するものです。記述例①の場合、#sideの要素の中にある.listクラスの要素にスタイルが適用されます。#sideと.listの関係は直下ではなくても大丈夫です。これが子「孫」と言われる所以です。こんなシーンで使われます。
<記述例>

複数のセレクタを組み合わせた指定は、他にもいろいろな方法があり、複雑な指定をすることもできます。それについては次回以降説明しますので頭にとどめておいてください。

セレクタには優先順位がある

同じ要素の同じプロパティに対して複数のスタイルが設定されている場合、セレクタの優先順位のもっとも高いものが適用されます。大まかな力関係は下記です。
<記述例>

!important > HTMLのstyle属性 > id > class > 要素名セレクタ
※!importantは宣言の後ろ、セミコロンの前に記述することで優先順位を上げるルールです。

また、子孫セレクタを利用した場合には、id、class、要素名それぞれの数を比較して、より多いスタイルが使われます。力関係は下記のようになります

.a1 .a2 .a3 > .b1 .a2
※クラスの多い方が優先

#a1 #a2 .b1 > #a1 .b1 .b2 .b3
※IDの数が多いセレクタとクラスの数が多いセレクタではIDの数が多いセレクタが優先

これらの例えとして、IDを10点、クラスを1点として合計数で比較しろとも言われます。
※ただし、クラスの合計が10を超えてもIDを上回ることはありません。(桁があがらない)

下記サイトはセレクタを入力すると、点数化して表示してくれます。
(参照:Specificity Calculator

次回の記事はこちらです→プログラミング入門講座⑥「CSSを書いてみよう」

【オススメ記事】
➡︎【CSS上達事例】書籍とWebサイトを使ってCSSを独学で身につけた話
➡︎ コーダー志望者必見!CSSのスクールBEST17
➡︎ マークアップエンジニアがオススメするCSS学習サイト
➡︎ CSSの本・参考書の評判

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

WebCampは、一ヶ月の短期集中でWebデザイン、プログラミングスキルを習得するスクールです。学習効果の高い反転授業(自主学習でインプット、講義でアウトプット)を採用し、年間1000名を輩出しています。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ

3WEB塾

WEB塾
ページ上部へ戻る