1. ホーム
  2. CSS
  3. 【CSS】セレクタ - その１ 基本セレクタ
投稿日: 投稿者: Hazuki

【CSS】セレクタ – その１ 基本セレクタ

CSS のセレクタって種類多いですよね。しっかり使いこなせるように、まとめます。

⇒ その１　基本セレクタ（今回）
⇒ その２　グループ化 / 結合子
⇒ その３　疑似クラス / 疑似要素

基本セレクタ

基本セレクタは5種類あります。

要素型セレクタ

指定した要素名の要素に対してスタイルを適用させます。

要素名 { スタイルプロパティ }

＜ 利用例 ＞
すべての <a> 要素に、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<a>適用される</a>
<p>こちらは適用されない</p>


/* CSS */
a {
 font-weight: 20px;
 color: lime;
}

全称セレクタ　「 * 」

すべての要素に対してスタイルを適用させます。

* { スタイルプロパティ }

＜ 利用例 – 01 ＞
すべての要素に、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<h1>これは例です</h1>
<p>これは例です</p>


/* CSS */
* {
 font-weight: 20px;
 color: lime;
}

＜ 利用例 – 02 ＞
.example の後に来る兄弟要素に、フォントサイズ 20px、黄緑色を適用。
（⇒ 隣接兄弟結合子参照）

<!-- html -->
<p class="example">こちらは適用されない</p>
<p>適用される</p>


/* CSS */
.example + * {
 font-weight: 20px;
 color: lime;
}

ID セレクタ

指定したid 属性の値を持つものに対してスタイルを適用させます。
id 属性の値は、同じ Web ページ内でが重複して指定できません。（次に説明するクラス属性は複数指定できます。）

#ID値 { スタイルプロパティ }

＜ 利用例 ＞
id=”example” を指定したものに対して、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<p id="example">ID が指定されている</p>
<p>ID が指定されていない</p>


/* CSS */
#example {
 font-weight: 20px;
 color: lime;
}

クラスセレクタ

指定したクラス属性の値を持つものに対してスタイルを適用させます。
クラス属性は、同じ Web ページ内で複数指定できます。（id 属性は重複不可。）

.クラス名 { スタイルプロパティ }

＜ 利用例 – 01＞
class=”example” を指定したものに対して、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<p class="example">クラスが指定されている</p>
<p>クラスが指定されていない</p>


/* CSS */
.example {
 font-weight: 20px;
 color: lime;
}

＜ 利用例 – 02＞
class=”example” を指定した <li> 要素に対して、フォントサイズ 20px、黄緑色を適用。
「 li.example 」とスペースを挟まずに繋げて記述。

<!-- html -->
<ul>
   <li>クラスが指定されていない</li>
   <li class="example">クラスが指定されている</li>
</ul>
<p class="example">適用されない</p>


/* CSS */
li.example {
 font-weight: 20px;
 color: lime;
}

＜ 利用例 – 03＞
class=”example” および “demo” の両方をクラスリストに含む <li> 要素に対して、フォントサイズ 20px、黄緑色を適用。
（⇒ HTMLでクラスを複数適用参照）
「 li.example.demo 」とスペースを挟まずに繋げて記述。

<!-- html -->
<ul>
   <li class="example">適用されない</li>
   <li class="demo">適用されない</li>
   <li class="example demo">これだけ適用される</li>
</ul>
<p class="example demo">適用されない</p>

<!-- CSS -->
li.example.demo {
 font-weight: 20px;
 color: lime;
}

属性セレクタ

指定された属性を持つ要素に対してスタイルを適用させます。

/* 指定した属性名の属性を持つ要素に適用 */
要素名[属性名] { スタイルプロパティ }

/* 指定した属性名の値全体が一致する属性を持つ要素に適用 */
要素名[属性名="値"] { スタイルプロパティ }

/* 指定した属性名の値が、スペースで区切られた複数の値の中の一つと一致する属性を持つ要素に適用　*/
要素名[属性名~="値"] { スタイルプロパティ }

/* 指定した属性名の値が、ハイフン (-) で区切られた先頭の語と一致する属性を持つ要素に適用　*/
要素名[属性名|="値"]  スタイルプロパティ }

/* 指定した属性名の値で始まる属性を持つ要素に適用　*/
要素名[属性名^="値"] { スタイルプロパティ }

/* 指定した属性名の値で終わる属性を持つ要素に適用　*/
要素名[属性名$="値"] { スタイルプロパティ }

/* 指定した属性名の値を文字列中に含む属性を持つ要素に適用　*/
要素名[属性名*="値"] { スタイルプロパティ }

＜ 利用例 – 01＞
lang の値が ja である <div> 要素に対して、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<div lang="ja">日本語だけ適用される</div>
<div lang="en">Not applicated</div>


/* CSS */
div[lang="ja"] {
 font-weight: 20px;
 color: lime;
}

＜ 利用例 – 02＞
href の値が http で始まる <a> 要素に対して、フォントサイズ 20px、黄緑色を適用。
（外部リンクのみ適用。）

<!-- html -->
<a href="/example.html">内部リンクは適用されない</a>
<a href="http://demo.com">外部リンクは適用される</a>
<a href="https://demo.com">SSLも適用される</a>


/* CSS */
a[href^="http"] {
 font-weight: 20px;
 color: lime;
}

カテゴリーCSS