//images.ctfassets.net/a2u8v2g0xvky/2NHTiWnT2LgJ3ACZwRRh73/518e11e8ca739dba7b6cb2d12fa6cf11/ã__ã__ã__ã__ã_µã__ã__ã__ã__ã__ã__ã__ç__é__ç__å____1_.png?fm=jpg&fl=progressive&fit=scale

##blocks #cssセレクタ

[Blocks]CSSセレクタの不一致ってどう解消するの？

2026/01/13

こんにちは！

今回は、Blocksの更新がうまくいかない原因として非常に多い「CSSセレクタの不一致」について、ウェブサイトのちょっとした変更にも負けない、壊れにくいセレクタを確実に入手する方法をご紹介します。

1. そもそもCSSセレクタって何？

CSSセレクタとは、HTMLという「家」の中にある 「特定のモノ」を指し示すための「住所」や「名前」 だと考えると分かりやすいです。Blocksやブラウザは、この「住所」を使って目的の要素を見つけ出します。

🔑 例え話で理解するセレクタの種類

HTMLの要素を「学校の生徒」に例えてみましょう。

null

セレクタの種類	例え話（生徒の探し方）	特徴
タイプ（要素）セレクタ	「3年A組の生徒全員」のように、種類で指定する	`div` や `p` など、タグ名で指定します。
クラスセレクタ	「サッカー部に所属している生徒」のように、共通のグループ名で指定する	`.soccer_club` のように、複数の要素が同じ属性を持ちます。
IDセレクタ	「学籍番号が『12345』の生徒」のように、一人だけの固有の番号で指定する	`#main-header` のように、HTML文書内で唯一無二の要素を特定します。
属性セレクタ	「赤いメガネをかけている生徒」のように、持っているアイテムや特徴で指定する	`<button type="text">` のように特定の属性を持つ要素を選択します。

Blocksでは、「この ボタン（#submit-button） を書き換えたい」と操作対象を正確に伝えるために、このセレクタが必要になります。

2. 「nth」が引き起こすセレクタの不一致

実際によくあるエラーが、セレクタにnth-childやnth-of-typeといった 「nth」 が含まれてしまうケースです。

例えば、以下のようなHTMLがあります。

HTML

<div class="product-list">
<div class="item">商品A</div>
<div class="item">商品B</div>
<div class="item">商品C</div>
</div>

この中の「商品B」のセレクタを取得すると以下のようにnthが含まれてしまいます。

.product-list > .item:nth-child(2)

このnthセレクタの最大の落とし穴は、 「要素の中身ではなく、その位置で要素を特定している」 という点です。

疑問：なぜnthで不一致が起きるの？

ウェブサイトのHTML構造は流動的です。サイト開発者が「ちょっとキャンペーンバナーを一番上に追加しよう」としただけで、Blocks側では「2番目だった要素が、知らない間に3番目に移動してしまった！」という事態が起こります。

例①：セレクタに合致する要素が見つからなくなるパターン

先ほどのHTMLに対し、親要素（div.product-list）の先頭に広告が2つ追加されたとします。

<div class="product-list">
    <div class="ad-banner">広告1</div>
    <div class="ad-banner">広告2</div>
    <div class="item">商品A</div>
    <div class="item">商品B</div>
</div>

以前は「2番目の子要素」が商品だったのに、今は「2番目の子要素」が広告になり、セレクタの後半の条件（.itemクラス）に合致しなくなります。

＜学校で例えるなら？＞

null

先生が「一番目の席」の人を指名したのに、雨漏りで「一番目の席」自体が撤去されてしまった状態です。

例②：セレクタに合致する要素がズレるパターン

今度は「商品A」の上に「おすすめ」バナーが1つ追加されたとします。
```
  <div class="product-list">
  　　　<div class="ad-banner">おすすめ！</div> 
  　　　<div class="item">商品A</div>
  　　　<div class="item">商品B</div>
  　　　<div class="item">商品C</div>
  </div>
```
nth-child(2)が指す要素は、当初取得したかった「商品B」ではなく、新しい「商品A」に変わってしまいます。この場合、不一致エラーは出ませんが、意図しない要素が書き換えられてしまいます。

＜学校で例えるなら？＞

null

先生が「一番目の席」の人を指名したけど、席替えがあり「一番目の席」に座っている人が変わってしまった状態です。

3. 解決方法：IDを設定して「名前」で呼び出す

サイト更新に影響されない 鉄壁のセレクタ を作るための結論は、対象のHTML要素に 「一意な名前」を付ける（ID属性） ことです。

①要素に一意なidを設定するHTML

開発チームと連携し、ターゲットにしたい要素（例：「商品B」）に、他の要素と絶対に重複しないidを付与してもらいます。

安定したHTMLの例

    <div class="product-list">
        <div class="item">商品A</div>
        <div class="item" id="**product-item-b-name**">商品B</div>
        <div class="item">商品C</div>
    </div>

②セレクタをidセレクタ（#）に置き換える

複雑なnthセレクタを、シンプルで強力なIDセレクタに置き換えます。

不安定なセレクタ	安定したセレクタ
`.product-list > .item:nth-child(2)`	`#product-item-b-name`

理解のポイント：idは「唯一無二のマイナンバー」

null

class属性： 「〇〇会社の社員」 のように、複数の人が同じ属性を持つことができます。
id属性： 「マイナンバー」 や 「学籍番号」 のように、HTML文書内に一つだけが持つ、唯一無二の番号です。

この「唯一無二」のIDを極力利用することが、セレクタの不一致というエラーから解放されるための最重要ポイントとなります。すべての要素が難しくても、Blocksの対象となる重要な要素だけでもIDを付与してもらうよう、開発チームに依頼してみましょう！

あとがき

サポートチームへのお問い合わせは管理画面グローバルナビゲーション > [?] サポートガイド > より可能です！

null

お問い合わせをお待ちしています！