[初心者対象]超基礎的なCSSセレクタの種類一覧-WordPressラボ

Date：2014/08/09 | カテゴリー

Category：WordPressテーマのカスタマイズ方法【HTML・CSSの基礎も】

※景品表示法に基づく表記：本記事には商品の広告が含まれています

“基本も基本…大原則だっ…！”

by 伊藤開司（マンガ：賭博黙示録カイジ）

CSS3では、かなり小技の効いた擬似要素などのセレクタが追加されました。

それらを知ることも大切ですが、まずは基本であるCSS1・CSS2レベルを押さえておくことが肝要。

押さえておかないと、例えばテンプレートのちょっとしたカスタマイズを行うことすらできなってしまうからです。

今日は、超基本的なCSSセレクタを、例を交えて紹介します。

なお「セレクタって何ぞや？」という方は、こちらの投稿を合わせて参照ください。

要素型セレクタ

E

指定したE要素に対して適用、おなじみかと思います。

p {
  color: red;
}

p {

color: red;

}

下記HTMLの場合、pタグ内のテキストカラーが変化します。

<h2>ここの色は変わらない。</h2>
<p>ここは赤色になる！</p>
<h3>ここの色は変わらない。</h3>
<p>ここも赤色になる！</p>

<h2>ここの色は変わらない。</h2>

<p>ここは赤色になる！</p>

<h3>ここの色は変わらない。</h3>

<p>ここも赤色になる！</p>

子孫セレクタ

E F（どんどん深く指定可能）

指定したE要素よりも、下位の階層にあるすべてのF要素に適用します。

p em span {
  color: blue;
}

p em span {

color: blue;

}

<div>
  <p>色が変わらない、<span>変わらない、<em>青色になる！</em>変わらない、<em>青色になる！</em>変わらない</span>変わらない。</p>
  <p>色が変わらない、<em>ここも変わらない、</em>ここも変化なし。</p>
</div>

<div>

<p>色が変わらない、<span>変わらない、<em>青色になる！</em>変わらない、<em>青色になる！</em>変わらない</span>変わらない。</p>

<p>色が変わらない、<em>ここも変わらない、</em>ここも変化なし。</p>

</div>

子供セレクタ

E > F（どんどん深く指定可能）

指定したE要素の直下にあるすべてのF要素に適用します。

ul > li > ul > li > a {
  color: green;
}

ul > li > ul > li > a {

color: green;

}

<ul>
  <li>ここの色は変わらない</li>
  <li><a href="hoge.html">ここの色も変わらない。</a></li>
  <li>
    <ul>
      <li>変化なし。</li>
      <li><a href="sample.html">ここが緑色になる！</a></li>
    </ul>
  </li>
</ul>

<ul>

<li>ここの色は変わらない</li>

<li><a href="hoge.html">ここの色も変わらない。</a></li>

<li>

<ul>

<li><a href="sample.html">ここが緑色になる！</a></li>

</ul>

</li>

</ul>

全称セレクタ

*（アスタリスク）

HTMl内のすべての要素に対して適用します。

* {
  color: yellow;
}

* {

color: yellow;

}

<div>
  <h2>ここの色が黄色！</h2>
  <p>ここの色も黄色！<span>ここも黄色になる！</span>すべて黄色になる！</p>
</div>

<div>

<h2>ここの色が黄色！</h2>

<p>ここの色も黄色！<span>ここも黄色になる！</span>すべて黄色になる！</p>

</div>

idセレクタ

#foo または E#foo

id属性名を付けた要素に適用します。

#wrapper {
  color: purple;
}
div#container {
  color: aqua;
}

#wrapper {

color: purple;

}

div#container {

color: aqua;

}

<div id="wrapper">
  <p>ここは紫色になります！</p>
  <div id="container">
    <p>ここは水色になります！</p>
  </div>
</div>

<p>ここは紫色になります！</p>

<p>ここは水色になります！</p>

</div>

classセレクタ

.foo または E.foo

class属性名を付けた要素に適用。一番汎用的と言えるかもしれません。

.txt01 {
  color: lime;
}
span.txt02 {
  color: gray;
}

.txt01 {

color: lime;

}

span.txt02 {

color: gray;

}

<div>
  <p class="txt01">ここの色は黄緑色！</p>
  <p class="txt02">ここの色は変わらない、<span class="txt02">ここは灰色になる！</span>ここは変わらない。</p>
</div>

<div>

<p class="txt01">ここの色は黄緑色！</p>

<p class="txt02">ここの色は変わらない、<span class="txt02">ここは灰色になる！</span>ここは変わらない。</p>

</div>

.foo.hoge （複数のセレクタ）

複数のclass属性名が、指定されている要素のみに適用させることも可能。個人的にANDセレクタとか呼んでいます。
（※そのような名前は、ありません）

.sample01.sample02 {
  color: red;  
}

.sample01.sample02 {

color: red;

}

<div>
  <p class="sample01">ここの色は変わらない。</p>
  <p class="sample02">ここの色も変わらない。</p>
  <p class="sample01 sample02">ここは赤色になる！</p>
</div>

<div>

<p class="sample01">ここの色は変わらない。</p>

<p class="sample02">ここの色も変わらない。</p>

<p class="sample01 sample02">ここは赤色になる！</p>

</div>

idセレクタ

#foo または E#foo

id属性名を付けた要素に適用します。

#wrapper {
  color: blue;
}
div#container {
  color: green;
}

#wrapper {

color: blue;

}

div#container {

color: green;

}

<div id="wrapper">
  <p>ここが青色になります！</p>
  <div id="container">
    <p>ここは緑色になります！</p>
  </div>
</div>

<p>ここが青色になります！</p>

<p>ここは緑色になります！</p>

</div>

隣接兄弟セレクタ

E + F

要素と要素が直接隣接している場合において、直後の弟要素に適用します。
ちなみに兄弟とは、親要素が同じになる要素同士のことです。

h2 + p {
  color: yellow;
}

h2 + p {

color: yellow;

}

<div>
  <h2>ここの色は変わらない。<h2>
  <p>ここが黄色になります！</p>
  <p>ここの色も変わらない。</p>
<div>

<div>

<h2>ここの色は変わらない。<h2>

<p>ここが黄色になります！</p>

<p>ここの色も変わらない。</p>

<div>

セレクタには、この他にも属性セレクタ、擬似要素、擬似クラスと呼ばれるものが存在します。
これらについては、CSS3レベルも含めて次回以降紹介したいと思います。

※属性セレクタの一覧は、こちらの記事（【サンプル有】入門からCSS3まで！属性セレクタリファレンス）に掲載しました。

超多機能でSEOに強い！ブロガー・アフィリエイターを虜にするWPテーマDIVER

国内最速のサイト表示スピード！最新技術が詰め込まれたWPテーマTHE THOR

【完全保存版】コーポレートサイト制作用WPテンプレートランキング最新Ver.

ブログ価値を高めたくないですか？デザインと機能に優れたブログ用テーマ一覧