CSSセレクターエラーの解決方法

このページでは、CSSセレクターの間違いが原因で発生する「要素が見つかりませんでした」エラーの解決方法を説明します。
前提として、以下の条件を満たすものとします。

• CSSとHTMLを読み書きできる
• Chrome DevToolsを使ってHTML要素を検証できる

（分からない場合は関連記事をご覧ください）

よくある原因と解決方法

まず、現在使用しているCSSセレクターを確認しましょう。

失敗したステップをクリックすると、CSSセレクターを確認できます。

では、よくある原因とその解決方法を見ていきましょう。

1. 自動生成されたCSSセレクター

原因

以下の例のように、CSSセレクターが非常に長い場合、DevToolsによって自動生成されたものである可能性があります。

#header-navigation > div > nav > div > div.d-none.d-lg-block.flex-grow-1.h-100 > div > div > div:nth-child(3) > a

CSSセレクターはDevToolsから手軽に取得できますが、ウェブサイトの構造が頻繁に更新される場合は壊れやすいので注意が必要です。

解決方法

対象要素固有のid、あるいはclassの組み合わせを探しましょう。

例として、以下の2つが挙げられます。

a#link_to_login_page

header a.navigation.login

idまたはclassがない場合、下記のように属性セレクターを使って他の属性を指定することもできます。

a[href="./login"]

a img[alt="login button"]

こうすることで、サイトの更新に強いセレクターを取得できます。

2. ランダムなidやclass名

下の例のように、CSSセレクターにランダムな文字列が含まれる場合、idまたはclass名が何らかのビルドツールによって生成された可能性があります。

a.login_ac2187y3

ランダムな部分（先頭、末尾、あるいはclass名・id全体）は、ビルド後に変更される可能性があります。

このようなケースも、属性セレクターを使って解決できます。

a[href="./login"]

また、一貫性のある部分がある場合（上の例では login）、ワイルドカード構文を使って指定できます。

下は、「login」という文字列を含むclass名と一致します。

a[class*="login"]

下は、「login」で始まるclass名と一致します。

a[class^="login"]

属性セレクターについて詳しくはMDN Web Docs - Attribute selectorsをご覧ください。

Tips

CSS セレクターの一意性を確認する方法

CSSセレクターがページ上の1つの要素にしかマッチしないことを確認するには、下記の手順に従ってください。

1. DevToolsウィンドウを開きます。
   2.「要素」タブを開きます。
2. Ctrl + F（Windows）または Cmd + F（Mac）を押して、検索テキストボックスを開きます。
3. テキストボックスにCSSセレクターを入力します。
4. セレクターが検出した要素の数を確認します。

それでも解決できない場合...

お気軽にカスタマーサクセスチームにご連絡ください。解決のお手伝いをいたします🙂

関連記事

• CSSセレクターの基本は、CSSセレクターを使いこなすをご覧ください。
• HTML要素を検証する方法は、ロケータを追加して要素を指定するをご覧ください。Chrome DevToolsの公式ドキュメントも参考になります。
• CSSセレクターで使用できる高度な構文については、MDN Web Docs - Attribute selectorsをご覧ください。