BLOG 2023.12.08

【完全保存版】よく使うCSSセレクター！詳細度と使い方まで

#CSS

Written by yamada

INDEX

CSSを記述する際に使用するセレクターについて、よく使うものをピックアップしました。

私も毎日のようにCSSを書いますが、なかなか使用しないセレクターはどうしても忘れてしまいます。自分の備忘録も兼ねてつくりましたので、みなさんもぜひこれを完全保存版としてブックマークし、「あれ？どう書くんだっけ？」と思ったときに読み返しましょう。

実際に制作現場で多く使用される記述方法などを交えてご紹介しますので、ぜひ参考にしてみてください。

基本セレクター

全称セレクター

*（アスタリスク）

すべての要素に適応されます。適用される範囲がとても広いため、使用する際には注意が必要です。

* {
    font-size: 1rem;
}

要素型セレクター

div p など

指定したHTMLのタグに対して適用されます。

normalize.cssなど初期スタイルのリセットのために使用することはあるかと思いますが、適用される範囲は広いため、後で紹介するグループ化セレクターや結合子として使用することが多くなることがほとんどです。

a {
    display: block;
    text-decoration: none;
}

IDセレクター

#hoge

指定したIDを持っている要素に適用されます。

詳細度が強くなるため、意図して適用させたいとき以外は、基本的にクラス名で指定する方がよいでしょう。

#red {
  background-color: #f00;
}

クラスセレクター

.hoge

指定したクラス名を持っている要素に適用されます。サイトをつくる中で最も使用頻度が多くなると思います。

適用範囲も調整しやすく、管理しやすいため、基本的にはこの形で指定することをおすすめします。

.green {
    color: #0f0;
}

属性セレクター

div[class] など

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

クラスセレクターでスタイルを適用したものの、一部適用させたくないときなどに使用することがあります。

もちろんclass以外の属性（type、dataなど）でもOKです。

/* class属性を持つdivタグに対して適用（値はなんでもOK） */
div[class] { 
    margin: 0;
}

a[target="_blank"] div[aria-hidden="true"]

指定した属性とその属性の値が一致したときに適用されます。

target="_blank"を持つaタグに別タブで開くアイコンを付ける。aria-hidden="true"を持つ要素にdisplay:noneを適用させるをときなどに便利です。

フォームを作る際には、input[type="text"]、input[type="email"]などで使い分けるときなどにも有効です。

/* target="_blank"を持つaタグに対して適用 */
a[target="_blank"] { 
  display: block;
}

/* aria-hidden="true"を持つすべての要素に対して適用 */
*[aria-hidden="true"] { 
  display:none;
}

a[href^="https"]

指定した属性の値が○○で始まる要素に適用されます。属性の後、=（イコール）の前に^を入れます。

例の場合は、href属性の値がhttpsで始まる場合に適用されます。

a[href$=".pdf"]

指定した属性の値が○○で終わる要素に適用されます。属性の後、=（イコール）の前に$を入れます。

例の場合は、href属性の値が.pdfで終わる場合に適用されます。リンクテキストがPDFファイルへのリンクのときにアイコンを変えたいに便利です。

a[href*="evoworx"]

指定した属性の値に○○が含まれる要素に適用されます。属性の後、=（イコール）の前に*（アスタリスク）を入れます。

グループ化セレクター

h1, h2, h3

カンマで区切ることで同じスタイルを複数の要素に対して適用させることができます。

h1, h2, h3 {
    font-size: 2.5rem;
}

結合子

div p など

セレクター1の中にある指定したすべてのセレクター2の要素に対して適用されます。

例の場合、div直下のpタグとsectionの中のpタグのどちらにも適用されます。

<div>
  <h2>見出し</h2>
  <p>テキストテキストテキスト</p><!-- ここに適用される -->
  <section>
    <h3>子見出し</h3>
    <p>テキストテキストテキスト</p><!-- ここに適用される -->
    <p>テキストテキストテキスト</p><!-- ここに適用される -->
  </section>
</div>

div > p

セレクター1の直下にある指定したセレクター2の要素に対して適用されます。

例の場合、div直下のpタグには適用されますが、sectionの中のpタグには適用されません。

<div>
  <h2>見出し</h2>
  <p>テキストテキストテキスト</p><!-- ここに適用される -->
  <section>
    <h3>子見出し</h3>
    <p>テキストテキストテキスト</p>
    <p>テキストテキストテキスト</p>
  </section>
</div>

h4 ~ p

セレクター1以降にあるセレクター2（兄弟要素）に対して適用されます。

例の場合は、h4より上にあるpタグには適用されず、h4以降にあるpタグにのみ適用されます。

<div>
  <h2>見出し</h2>
  <p>テキストテキストテキスト</p>
  <section>
    <h3>子見出し</h3>
    <p>テキストテキストテキスト</p>
    <p>テキストテキストテキスト</p>
    <h4>子見出し</h4>
    <p>テキストテキストテキスト</p><!-- ここに適用される -->
  </section>
</div>

h3 + p

セレクター1の直後にあるセレクター2の要素にのみ適用されます。例の場合は、h3の直後にあるpタグのみに適用されます。

HTML構造で組み合わせによってmarginを変更したいときなどに便利です。

<div>
  <h2>見出し</h2>
  <p>テキストテキストテキスト</p>
  <section>
    <h3>子見出し</h3>
    <p>テキストテキストテキスト</p><!-- ここに適用される -->
    <p>テキストテキストテキスト</p>
  </section>
</div>

擬似表記

擬似クラス

a:visited（訪問済みリンク）、button:hover（要素にマウスカーソルが乗った）など、基本セレクターに:を付けて表記することで、要素の状態変化などによって適用させます。

また引数を定義する括弧使えるものも存在し数値を入れるなどして何番目か指定するものもあります。

サイトを制作する中でも使用頻度は多いため、しっかり覚えて効率よくCSS設計できるようにしましょう。

:hover

マウスカーソルが指定した要素の上に来たときに適用されます。

aタグやbuttonタグなど、クリックできることをユーザーに知らせるために使います。

/* 通常時のスタイル */
a:hover {
    color: #000;
    transition: .6s;
}

/* マウスカーソルが乗った時のスタイル */
a:hover {
    color: #ff0;
}

:root

文書のルート要素に適用されます。HTMLの場合は通常htmlタグに適用されます。

:root {
    --red: #f00;
    --green: #0f0;
    --blue: #00f;
}

:first-child

兄弟要素のうち、一番最初に記述されている要素に適用されます。

p:first-child {
    color: #f00;
}

<div>
  <p>テキストテキストテキスト</p><!-- ここに適用される -->
  <p>テキストテキストテキスト</p>
  <p>テキストテキストテキスト</p>
</div>
<div>
  <h2>見出し</h2>
  <p>テキストテキストテキスト</p>
</div>

:last-child

兄弟要素のうち、一番最後に記述されている要素に適用されます。

p:last-child {
    color: #f00;
}

<div>
  <p>テキストテキストテキスト</p>
  <p>テキストテキストテキスト</p>
  <p>テキストテキストテキスト</p><!-- ここに適用される -->
</div>
<div>
  <h2>見出し</h2>
  <p>テキストテキストテキスト</p><!-- ここに適用される -->
</div>

:nth-child(n)

兄弟要素のうち、括弧の中の数値の順番に記述されている要素に適用されます。

p:nth-child(2){
  color: #f00;
}

<div>
  <p>テキストテキストテキスト</p>
  <p>テキストテキストテキスト</p><!-- ここに適用される -->
  <p>テキストテキストテキスト</p>
</div>
<div>
  <h2>見出し</h2>
  <p>テキストテキストテキスト</p><!-- ここに適用される -->
</div>

:first-of-type

兄弟要素のうち、指定された型（タグ名）の中で最初に記述されている要素に適用されます。

p:first-of-type {
 color: #f00;
}

<div>
 <p>テキストテキストテキスト</p><!-- ここに適用される -->
 <p>テキストテキストテキスト</p>
 <p>テキストテキストテキスト</p>
</div>
<div>
 <h2>見出し</h2>
 <p>テキストテキストテキスト</p><!-- ここに適用される -->
</div>

:last-of-type

兄弟要素のうち、指定された型（タグ名）の中で最後に記述されている要素に適用されます。

p:last-of-type {
 color: #f00;
}

<div>
 <p>テキストテキストテキスト</p>
 <p>テキストテキストテキスト</p>
 <p>テキストテキストテキスト</p><!-- ここに適用される -->
</div>
<div>
 <h2>見出し</h2>
 <p>テキストテキストテキスト</p><!-- ここに適用される -->
</div>

:nth-of-type(n)

兄弟要素のうち、指定された型（タグ名）の中で括弧に記述されている数値の順番の要素に適用されます。

また括弧の中をoddにすると奇数、evenにすると偶数、3nなどにすると数値の倍数（3nの場合は3の倍数）、4n+2にすると4の倍数に2を足した数（最初の2も含む）にするなど、さまざまなパターンで使うことが多いです。

カードタイプのレイアウトでマージンを付ける位置などを変えたいときなどに使うことができます。

p:nth-of-type(2) {
 color: #f00;
}

<div>
 <p>テキストテキストテキスト</p>
 <p>テキストテキストテキスト</p><!-- ここに適用される -->
 <p>テキストテキストテキスト</p>
</div>
<div>
 <h2>見出し</h2>
 <p>テキストテキストテキスト</p>
</div>