に変わった。
-
Hello! C2 の前に
Hello! C0 が追加され、リストの2番目から3番目に変わった。
などといった、ページ更新によるHTMLの構成の変更や、デザイン変更によるclassやidの変更が生じると、それまで指定出来ていたCSSセレクターでは対象要素が指定出来なくなる、という問題が発生する可能性が高くなります。
### 2.2. タグだけで指定する
「HTML階層構造に沿って直上の親要素を順に全て指定する」CSSセレクターを、
タグ・
タグのclass・idを省いて要素のみで指定すると下記の様になります。
```
body > div > div > section > ul:last-child > li:nth-child(2)
```
この場合、「div > div > section」は「このHTML階層構造に合致するタグ・
タグ」という条件になります。
class・idに変更が生じやすいサイトの場合は、タグ・
タグのclass・idを省いて要素のみで指定すると良いでしょう。
### 2.3. class・idだけで指定する
class・idを持つ要素はclass・idのみを記述することも出来ます。
「HTML階層構造に沿って直上の親要素を順に全て指定する」CSSセレクターで、class・idを持つタグと
タグをclass・idだけで指定すると、下記の様になります。
```
body > .aaaaa.ccccc > #bbbbb >.ccccc > ul:last-child > li:nth-child(2)
```
この場合、「.aaaaa.ccccc > #bbbbb >.ccccc」は「このHTML階層構造に合致する、該当のclass・idが設定された全ての要素」という条件になります。
### 2.4. 直下の子要素を指定する
```
div.aaaaa > section > ul:last-child > li:nth-child(2)
```
上記のCSSセレクターは、の直下に子要素となる
タグが存在しないため、このCSSセレクターの指定対象となる**要素は存在しません**。
### 2.5. 子孫要素を指定する
「直下の子要素指定」ではの直下に
タグが存在しないので、指定対象の要素が存在しませんでしたが、このCSSセレクターの**「div.aaaaa > section」**の直下子要素指定を**「div.aaaaa section」**と子孫要素指定に変えると、の子孫要素である
タグは存在します。
```
div.aaaaa section > ul:last-child > li:nth-child(2)
```
上記のCSSセレクターは、**クラス名「aaaaa」が設定されたタグの子孫要素
の中で最後の直下の- の2番目** が対象要素となり、指定対象は **
- Hello! C2
** です。
### 2.6. CSSセレクターをより短くする
先に述べた通り、「HTML階層構造に沿って直上の親要素を順に全て指定する」CSSセレクターは、ページ更新によるHTMLの構成の変更や、デザイン変更によるclassやidの変更が生じると、それまで指定出来ていたCSSセレクターでは対象要素が指定出来なくなる、という問題が発生するリスクが高くなります。
CSSセレクターを短くシンプルにすることで、このリスクを減らすことが出来ます。
「HTML階層構造に沿って直上の親要素を順に全て指定する」でも取り上げた下記のCSSセレクターを指定条件で分解すると、
```
body > div.aaaaa.ccccc > div#bbbbb > section.ccccc > ul:last-child > li:nth-child(2)
```
1. body > div.aaaaa.ccccc > div#bbbbb > section.ccccc > ul > li
- このHTML階層構造に合致する要素が対象
2. ul:last-child
- 1の条件に合致するタグの中で一番最後のタグが対象
3. li:nth-child(2)
- 1の条件に合致する- タグの中で2番目の
- タグが対象
となります。
1 のHTML階層構造は、**対象要素が特定可能な範囲であれば**短くする事が出来ます。
例えば、タグがページ内でこの部分にしか存在しない場合、はこのページでは一意の要素となるので、下記の様にタグまでの親要素を指定するCSSセレクターでも対象を特定出来ます。
```
section > ul:last-child > li:nth-child(2)
```
上記のセレクタの場合、**直下の子要素
の中で最後の直下の- の2番目** が対象要素となり、指定対象は **
- Hello! C2
** です。
なお、[W3C](https://www.w3.org/TR/html51/dom.html#the-id-attribute) の勧告では「id属性の値は一つの文書内で一意でなければならない」とされているため、idが設定されている要素はページ内で一意な要素である確率が高いです。
### 2.6.1. CSSセレクターを短縮しすぎると…
CSSセレクターを短縮しすぎると、指定対象が一意なものでなくなったり、対象要素が指定出来なくなることがあるので、注意が必要です。
#### 2.6.2. 指定対象が複数存在する (1)
```
section > ul > li:nth-child(2)
```
上記のセレクタの場合、**直下の子要素の2番目** が対象要素になるため、指定対象は **- Hello! A2
・- Hello! B2
・- Hello! C2
** です。
#### 2.6.3. 指定対象が複数存在する (2)
```
section li
```
上記のセレクタの場合、**の子孫要素- が対象要素** になるため、指定対象は **
- Hello! A1
・- Hello! A2
・- Hello! A3
・- Hello! B1
・- Hello! B2
・- Hello! B3
・- Hello! C1
・- Hello! C2
・- Hello! C3
** です。
#### 2.6.4. 指定対象が存在しない
```
section > li:nth-child(2)
```
上記のセレクタの場合、**直下の子要素- の2番目**が対象要素になるため、対象となる**要素はありません**。
#### 2.6.5. 指定したい要素ではない要素が指定対象になる
```
section li:nth-child(2)
```
上記のセレクタの場合、**の子孫要素
- の2番目** が対象要素になるため、指定対象は **
- Hello! A2
** です。
## Related
- [ロケータを追加して要素を指定する](/add-a-locator.md)