WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > セレクタ一覧 > 要素・クラス・ID・全 セレクタ

要素/クラス/ID/全てのセレクタ指定方法

「要素セレクタ」「クラスセレクタ」「IDセレクタ」「全てセレクタ」を利用することで、サイトのデザイン統一などを容易に行えるようになります。

種類 cssセレクタの書き方 左記例の意味
要素
セレクタ
input { color: red; } 「input」タグの文字を赤色にする
クラス
セレクタ
.cl1 { color: red; } クラス「cl1」の要素の文字を赤色にする
ID
セレクタ
#id1 { color: red; } ID「id1」の要素の文字を赤色にする
全て
セレクタ
* { color: red; } 全ての要素の文字を赤色にする
« 主要セレクタ一覧
疑似要素セレクタ »
広告

要素セレクタ

HTMLの要素(タグ)に対してデザインを指定します。


<style type="text/css">
  body  { color: blue; }        /* ページ全体の文字を青色にする  */
  div   { color: red; }         /* DIV内の文字を赤色にする       */
  div p { color: green; }       /* DIV内のP内は文字を緑色にする  */
</style>

<body>
<p>ここは青色になります</p>
<div>
    ここは赤色になります
    <p>ここは緑色になります</p>
</div>
ここは青色になります
</body>
ページTOP

クラスセレクタ

HTMLの要素(タグ)に定義されているクラスてデザインを指定します。


<style type="text/css">
  .cl1      { color: blue; }        /*「cl1」クラスは文字を青色にする  */
  .cl2      { color: red; }         /*「cl2」クラスは文字を赤色にする  */
  .cl2 .cl3 { color: green; }       /*「cl2」内の「cl3」クラスは文字を緑色にする  */
</style>

<body>
<p>ここの文字はデフォルト(通常は黒)色になります</p>
<p class="cl1">ここは青色になります</p>
<div class="cl2">
    ここは赤色になります
    <div class="cl3">ここは緑色になります</div>
</div>
ここの文字はデフォルト(通常は黒)色になります
</body>
ページTOP

IDセレクタ

HTMLの要素(タグ)に定義されているIDてデザインを指定します。


<style type="text/css">
  #id1      { color: blue; }        /*「id1」は文字を青色にする  */
  #id2      { color: red; }         /*「id2」は文字を赤色にする  */
  #id2 #id3 { color: green; }       /*「id2」内の「id3」は文字を緑色にする  */
</style>

<body>
<p>ここの文字はデフォルト(通常は黒)色になります</p>
<p id="id1">ここは青色になります</p>
<div id="id2">
    ここは赤色になります
    <div id="id3">ここは緑色になります</div>
</div>
ここの文字はデフォルト(通常は黒)色になります
</body>
ページTOP

全てセレクタ

HTMLの要素(タグ)に定義されているIDてデザインを指定します。


<style type="text/css">
  *        { color: blue; }        /* 全ての要素の文字を青色にする  */
</style>

<body>
<p>ここの文字は青色になります</p>
<div>
    ここの文字は青色になります
    <div>ここの文字は青色になります</div>
</div>
ここの文字は青色になります
</body>
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン