まず始めに、自分はWEBデザイナーではないので詳しいことは分かりません。
ですが、Pythonでスクレイピングをする上で必要な知識だけを頭に入れたのでここで紹介出来たらなと思います。
CSSセレクタは便利なので使えるようになるとSeleniumでの要素選択の幅が広がるかもしれないですね。
目次
CSSセレクタって何か知っていますか？
ブログしてる方ならCSSってあの装飾の？みたいに思うかもしれません。
CSSはそのCSSです！
では、CSSセレクタとはなんなのでしょうか？
詳しくは後で説明しますが、簡単に言うと
どのHTML要素にCSSを適用させるかを指定するためのものです。
HTMLの基礎
まずHTMLについて軽く知っておかないとダメですね
っていうよりスクレイピングしている人なら大体は分かっていると思いますが笑
HTMLで知っておいた方がいいのはタグと属性です。
タグ
タグとは
<h1>
高専ブログ
</h1>上記の場合開始タグ（<h1> ）終了タグ（</h1>）のことを指します。
記述をタグで囲むことで文章構造になっています。
また、タグで囲われた塊のことを「要素」といいます。
この要素をSeleniumでは選択しています。
属性
まずリンクがついているHTMLを見てみましょう。
<a href="https://kacchanblog.com/about-kosenblog">
KOSEN{BLOG}について
</a>上記は例として書いています。
Aタグの中に「href」という属性があります。
この「https~~」は属性値と呼ばれます。
タグの追加設定みたいなイメージですね。
設定を属性。値を属性値と呼びます。
CSSの基本
CSSは主に以下の三つで構成されます。
- セレクタ – どの要素の
- プロパティ – 何を
- 値 – どのようにするか
p{
color:blue
}以上のような形になります。
ｐ要素の色を青にする。という意味になります。
ここで出てきたセレクタこそがCSSセレクタなんですよ。
つまり、冒頭で言った「どのHTML要素にCSSを適用させるかを指定するためのもの」ということになります。
CSSセレクタの基本
ざっと簡単に並べますね。
要素の指定
先ほどの例のようにそのままですね
Pタグだと「p」だけです。
すべての要素を指定する場合はアスタリスクにしてあげます。
p {
color:blue
}クラス名で指定
クラス名はSeleniumで指定するときもよく使いますね。
これは名前の前にピリオドを置いてあげます。
.class {
color:blue
}ID名で指定
こちらもSeleniumで指定するときによく使いますね。
これは名前の前にシャープを置いてあげます。
#id {
color:blue
}タグの中のクラス、ID指定
例えばPタグの属性のClassやIDを指定したい場合
「p.class、p#id」という風になります。
p#id {
color:blue
}子要素の指定
例えばPタグの子要素にspanタグがありそれを指定する場合。
半角スペースを空けることで指定できます。
p span {
color:blue
}子セレクタの指定
個人的にこれを一番使ってます。使いやすいんですよね
pタグの一階層下の子要素を指定できます。
先ほどとの違いは、「一階層下」ということです。
先ほどは子要素全体でしたが、これは一階層下までの子要素です。
＞を置いてあげます。
p > span {
color:blue
}隣接セレクタの指定
ここから少しイメージしづらいかもです。
A + Bの場合
Aの直後にあるBを指定します。divタグの直後にあるpタグを指定してます。
div + p {
color:blue
}要素の後ろにある同じ階層のセレクタの指定
A ~ Bの場合
Aの以降にある同じ階層のBを指定します
divタグの以降にある同じ階層のすべてのpタグを指定します。
div ~ p {
color:blue
}複数のセレクタの指定
A , Bの場合
AとBを指定します。
divタグとspanタグを指定します。
div , p {
color:blue
}なぜいいのか？
これは自分の感想になります。
まず、Seleniumでfind_elementでIDやクラスを探すと思いますが、裏ではCSSセレクタで指定されています。
エラー文とか見ると書かれてたりしますよ。
階層で指定できる。
自分は使っててこれが一番の魅力でした。
要素を指定するとき同じクラス名のものがあり、片方だけが欲しい場合、一階層上の要素が違う場合は「A > B」と指定することで目的の要素を選択できます。
使い方としては、aタグにクラスなど指定できるものがないとき
.class > a
でクラスの下のaタグを抜き出してhrefの値を抜くみたいにできます。
っていうか自分はこれしか使ってなかった！
調べたら思ったより多くてびっくりしました。
色々あったので今度から使えるものは使っていきます。
あ、あと子要素の指定とかもたまに使ってましたわ
では！ みんなもつかってみてねー
使ってみたら便利って気づくかも？？
youtubeを始めてみました。
youtubeを始めてみました。
https://www.youtube.com/channel/UC-sjs4cFaHmSFIi2x_u_qDw
これからSeleniumを用いたBotの作成できるように動画をとっていくつもりです。
質問などコメントいただけると今後改善できるのでありがたいです。
