トップ ＞ スキル ： Web ＞ CSSセレクタの記述方法

Web

CSSセレクタの記述方法1

CSSセレクタとは、スタイルを適用する対象を選択するものです。よく使われているclassやidなどもセレクタの１つです。

CSSセレクタ

CSSセレクタには、いくつか書き方があります。ここでは、良く利用されるCSSセレクタについて紹介します。
ここで紹介するCSSセレクタの中でIEだとうまく動かないものもあります。

※ ここではある要素をE、Fとして表し、Eが親要素でFは子要素の時もあったり、隣り合う要素として表現しています。

単独セレクタ

＊（全称セレクタ：ユニバーサルセレクタ）

アスタリスク（＊）は、すべての要素にスタイルを適用できるセレクタです。

例１）すべての要素のマージンとパディングを「0」にする。

  • * {
        margin:0;
        padding:0;
        }

例２）P要素の中にあるすべてに（P要素内の子要素すべてに）文字色＃333を適用する。

  • p * {
        color:#333;
        }

E（要素セレクタ：タイプセレクタ）

タイプセレクタは、特定の要素に対してスタイルを指定します。もっとも使用する機会が多いセレクタである。

例）すべてのh1要素のフォントサイズに24pxを適用する。

  • h1 { font-size:24px;}

一意セレクタ

一意セレクタは、id属性で指定した名前のみにスタイルを適用します。クラスとの違いは、同じ文書中に同じid名が2つ以上存在してはならないという点です。一意セレクタは、「#」（シャープ）記号を使います。

#id名（要素にid属性で名前を指定）

id名を付けた要素にスタイルを適用できるセレクタです。id名は同一ページに同じ名前は１つしか指定できません。

例）div要素にid属性で名前を付けて、その名前を使用して文字色に赤を適用する。

【HTML】
   <div>〇〇〇・・・</div>

【CSS】
   div#text { color:red;}
  または、
   #text { color:red:}

クラスセレクタ

クラスセレクタは、class属性で指定した名前のみスタイルを適用します。クラス名の前に「.」（ピリオド）を付けます。

.class名（要素にclass属性で名前を指定）

クラス名を指定した要素にスタイルを適用できるセレクタです。

例）クラス名「design」が設定されている要素の文字色を#ff00ffに適用し、p要素のクラス名「design」だけには太字も適用する。

【HTML】
   <p class="design">〇〇〇・・・</p>
   <div class="design">▲▲▲・・・</div>

【CSS】
   .design { color:#ff00ff;}
   p.design { font-weight:bold;}


また、1つの要素に複数のクラス名を適用するには半角スペースで区切ります。

例）p要素にクラス名「text」と「iro」の2つのスタイルを適用する。

【HTML】
   <p class="moji iro">〇〇〇・・・</p>

【CSS】
   p.text { font:bold 1.5em;}
   p.iro { color:red;}

子孫セレクタ

子孫セレクタは、ある要素の中に包括されている特定の要素に対してスタイルを適用します。上位の要素と指定する要素の間に半角スペースを挿入します。

E F（子孫要素に適用）

ある要素（E）内に含まれている要素（F）にスタイルを適用するには、セレクタを半角スペースで区切ります。

例１）div要素内のp要素に太字を適用する。

HTML

    	<div>
        <p>〇〇〇・・・</p>
        </div>

CSS

    	<style type="text/css">
        	div p { font-weight:bold;}
    	</style>

例２）div要素内のp要素に含まれているem要素の斜体解除を適用する。このHTML構造を見ると、div要素が親要素、p要素が子要素、em要素が孫要素と表現できます。

HTML

    	<div>
        <p>〇〇〇〇<em>▲▲</em>・・</p>
        </div>

CSS

    	<style type="text/css">
        	div p em { font-style:normal;}
    	</style>

例３）クラス名「sample」の付いた要素の下の階層にあるp要素に文字色「orange」を適用する。

HTML

    	<div class="sample">
        <p>〇〇〇〇・・</p>
        </div>

CSS

    	<style type="text/css">
        	.sample p { color:orange;}
    	</style>

子セレクタ

子セレクタは、子孫セレクタと異なり、直接の子要素として存在している要素のみが対象となります。

E > F（子要素のみ適用）

セレクタを「>」で区切ると、ある要素（E）の直下で指定された要素（F）のみにスタイルが適用されます。

例）クラス名「sample」の直下のspan要素だけに文字色「赤」を適用する。ブラウザ（IE）によってはこのCSSセレクタの書き方が適用されない場合もあります。

HTML

    	<p class="sample">
        〇〇〇〇<span>▲▲</span>・・<br />
        <em>□□□<span>***</span></em>
        </p>

CSS

    	<style type="text/css">
        	.sample > span { color:red ;}
    	</style>
子セレクタ

兄弟セレクタ

兄弟セレクタ（隣接セレクタ）は、同一の親要素を持ち、かつ隣接関係にある要素のみ適用されます。階層の深さが違う要素には適用しません。

E ＋ F（隣接の要素のみに適用）

セレクタを「＋」で区切ると隣接している要素（F）にスタイルが適用されます。

例）h3要素に隣接しているp要素だけに太字と文字色「青」を適用する。

HTML

    	<h3>見出し3</h3>
        <p>見出し3に隣接している段落</p>
        <p>見出し3に隣接していない段落</p>

CSS

    	<style type="text/css">
        	h3 + p {
            	font-weight:bold;
                color:blue;
                }
    	</style>
兄弟セレクタ1

E ～ F（後ろにある要素のみに適用）

セレクタを「～（チルダ）」で区切るとある要素（E）の後ろにある要素（F）にスタイルが適用されます。（CSS3）

例）h3要素の後ろにあるp要素に太字と文字色「青」を適用する。

HTML

    	<p>見出し3の後ろにある段落</p>
    	<h3>見出し3</h3>
        <p>見出し3の後ろにある段落</p>
        <address>署名</address>
        <p>見出し3の後ろにある段落</p>

CSS

    	<style type="text/css">
        	h3 ~ p {
            	font-weight:bold;
                color:blue;
                }
    	</style>
兄弟セレクタ2

【CSSセレクタの記述方法1】