CSS、CSSセレクター

Webページでの操作をロボットに教える

ではいったい、CSSセレクターとは何でしょう？
まずは、その名前にも入っている「CSS」から説明します。

CSSとは？

CSSは、HTMLと組み合わせてWebページの見た目を作るのに使われています。このWebページでも、HTMLとCSSとがセットで使われることで、ご覧の見た目になっています。
HTMLのみでWebページを作ることもできますが、CSSを使うことで、HTMLのタグで囲んだ範囲（要素）に対して、文字や背景の色などを設定することができます。
つまりCSSとは、Webページを見栄えよく設定するための情報のことです。

実際のWebページでは、HTMLやCSSの構造は以下のようになっています。

CSSセレクターとは？

CSSでは、Webページ上の「どの要素の」「どの項目に」「どんな設定を行うか」を指定します。「どの要素の」という部分は、Coopelを使ううえでも非常に大切です。
たとえば、以下の「CSSセレクターとは？」という要素をCSSで指定するには、「div要素の中のul要素の中にあるli要素の1番目」という情報が必要です。

このように、どの要素を指定するかという情報のことを、CSSセレクターと呼びます。要素がWebページ上のどこにあるのかを示すので、Webページ上の住所のようなイメージです。
ロボットに正しい操作をさせるには、操作する要素を明確に教える必要があります。Webページ上の内容は、CSSと組み合わせて見栄えを実現するために、いろいろな要素に分けて書かれています。この仕組みをもとにCSSセレクターを指定することで、ボタンをクリックする、プルダウンから項目を選択する、ファイルをダウンロードするといった具体的な作業を、ロボットが操作できるようにしています。

Webサイト側でページのレイアウトなどが変更されてしまうことは防げませんが、CSSセレクターを使って要素を指定することで、位置が変わってしまっても、Webページでの操作を正しく行うことができるのです。

関連ヘルプ

Coopel Selector Helperとは