【CSSセレクタ】サイト改修で外れ辛いセレクタの指定方法
サポートアクションの埋め込みコンテンツやコーチマークでは、サイト上の要素を指定してその要素を置換したりハイライトしたりすることが可能です。
この際利用するCSSセレクタはKARTE Action Viewerなどから取得することが多いと思いますが、稀に「最初は正常に動いていたのにいつの間にか置換がされなくなっていた」というケースが発生します。
このアンサーでは、そういった事態が起きづらいCSSセレクタの指定方法について記載します。
このアンサーではCSSセレクタそのものに対する説明は省略しますので、CSSセレクタの基本的な内容はこちらを参照ください。
結論から記載すると、なるべく
- 「>」や「:nth-child」「:nth-of-type」を利用せず
- ID指定（「#」）やリンク先の指定（「href=""」）を用いる
ことを意識すると、一意でありかつ外れづらいCSSセレクタを作ることができます。
「最初は動作していたCSSセレクタが効かなくなる」原因
大きく分けて以下の２つの原因が考えられます。
- サイトの改修によってHTMLの構造が変更されてセレクタが外れてしまった
- 外部ツールやJavascriptで動的に生成されたコンテンツを挿入したことでHTMLの構造が変更されてセレクタが外れてしまった
サイトのデザインが一新されるような大改修の場合は例外ですが、1と2で共通するのは「特定の要素の前後に新しい要素が追加される」という動きです。
例えば、サイト改修なら「サイトバーにバナーを１つ追加した」というケースや、動的生成コンテンツの挿入なら「FAQコンテンツの前に見出しが自動で入るようにした」というケースです。
これらにある程度耐えられるようにCSSセレクタを工夫することは可能です。
効かなくなる可能性のあるCSSセレクタとはどういったものか？
上記のケースを踏まえると、CSSセレクタに以下のような記法があると効かなくなるリスクが高まることがわかります。
- 親子関係を厳密に定義する子セレクタ（div > div > aというような書き方）
- 兄弟内での位置を厳密に定義する擬似クラス（:nth-childや:nth-of-typeというような書き方）
1は親子関係が変更された（ex. div > div > aだったものがdiv > div > div > aになった）場合にCSSセレクタが外れてしまいますし、2の場合は前に要素が挿入された場合にCSSセレクタが外れてしまいます。
この２つがあると必ず効かなくなるということはありませんが、サイト改修時などに埋め込みコンテンツなどが動かなくなるリスクは高まってしまいます。
例えば、以下のような「グローバルナビゲーションのマイページリンクを指定したい」ケースを考えてみましょう。
検索で指定されているような#gatsby-focus-wrapper > div > header > div > div > a:nth-of-type(2)というCSSセレクタは対象要素を指定できているため一見良いと思えますが、「よくあるご質問の左にリンク（aタグ）が追加された」「デザイン調整のためにheaderタグの中の階層が１つ増えた（header > div > div > div > aという構造になった）」場合に聞かなくなってしまいます。
理想的なCSSセレクタはどういった書き方か？
では、どういったCSSセレクタの書き方をすれば良いのでしょうか。
理想的なCSSセレクタの要素は以下です。
- ページ内でその要素のみを指し示すことができる
- シンプルで構成要素が少ない
そのため、例えば以下のような工夫をすると良いでしょう。
- 対象の要素にID属性がついているならそれを利用する（ex. #id）
- 対象の要素に一意になるClass属性がついているならそれを利用する（ex. .class）
- 対象の要素に一意になるリンク先が指定されているならそれを利用する（ex. a[href="link"]）
これらの工夫をすることで、ページ内で一意になりつつシンプルなCSSセレクタを作ることができます。
先ほどの「グローバルナビゲーションのマイページリンクを指定したい」ケースで考えると以下のようになります。
ページ内にログインページへのリンクが貼られている要素はこの１つしかないため、a[href="/cs-hoken-edge/login"] としてリンク先をCSSセレクタに追加することでシンプルで一意なCSSセレクタにすることができます。
外れづらいCSSセレクタの作り方
ここまでの話を踏まえ、CSSセレクタを作る際の手順を記載します。
※以降はChrome上での操作を前提として記載します
①ブラウザの検証ツールを起動する
まずは対象要素を調べる必要があるため、検証ツールを起動します。
CSSセレクタを取得したいページの余白を右クリックし、選択肢の下にある「検証」を選択します。
windowsなら「Ctrl + Shift + I」、Macなら「Command + Option + I」のショートカットで開くことも可能です。
検証ツールを開いたら「要素」タブを表示しておきます。
②対象要素を選択する
検証ツール左上の「ページ内の要素を選択して検査」を選択し、画面からCSSセレクタを取得したい要素を探し、クリックします。
添付のように対象要素の親や子にフォーカスが当たってしまう場合は、一旦近い要素をクリックして「要素」タブ内で対象の要素を選択し直すと効率的です。
③付与されている属性を調べる
対象要素を選択すると、その要素に付与されている属性を「要素」タブから確認することができます。
今回のケースだと、
- タグの種類はaタグ
- href属性がついており、値は「/cs-hoken-edge/login」
- style属性がついており、値は「style="display:inline"」
であることが分かります。aタグ自体は一般的に利用されるものなことと、style属性は動的に変わる可能性が高いため、href属性の値で指定する方向で調べてみます。
※対象要素にidやclassが付与されていたら、まずそちらを使ってみることを推奨します
「タグ[属性名="値"]」で指定すると特定の属性値を持つタグのみを指定できるため、「a[href="/cs-hoken-edge/login"]」というCSSセレクタを作成し、要素内で検索をしてみます。
要素内の検索はwindowsなら「Ctrl + F」、Macなら「Command + F」で可能です。
作成したCSSセレクタを入れてみたところ、ページ内で対象の１つしかヒットがありませんでした（検索窓の右側で1/1となっているのが分かります）。
一意に指定しつつ外れづらいという要件が満たせたため、今回はこのCSSセレクタを利用すれば問題ないことが分かりました。
④（必要なら）親に遡る
もし③までの行程を試して検索結果が2つ以上になった場合、さらに絞り込む必要があります。
その場合は、一意に絞り込めるまで親（１つ上の階層）を遡って③と同じことを試していく形になります。
例えば今回のケースだと、対象要素の親は「css-k008qs」というクラスのついたdiv要素なので、CSSセレクタは「. css-k008qs a[href="/cs-hoken-edge/login"]」となります。
このように、「>」や「:nth-child」などに頼らず要素に付与されている属性を駆使することで、一意になりつつシンプルで外れづらいCSSセレクタを作ることができます。
最初は時間がかかるかもしれませんが、慣れればすぐできる上安全性も高くなるため、ぜひトライしてみてください。