■ はじめに

https://dk521123.hatenablog.com/entry/2021/03/06/234935
https://dk521123.hatenablog.com/entry/2021/03/05/113518
https://dk521123.hatenablog.com/entry/2015/05/15/000926

などで、CSSセレクタやJavaScriptのdocument.querySelector/querySelectorAll
で指定するやりかたが書いてあるので、色々なセレクタの指定の仕方をメモする。
 => document.querySelector/querySelectorAll については、
　　以下の関連記事を参照のこと

DOM ～基本編 / オブジェクト取得～
https://dk521123.hatenablog.com/entry/2022/11/21/000000

【１】基本

１）要素セレクタ - タグ指定

そのまんま。タグを記載すればいい。

サンプル

// h3タグを指定する場合
h3

２）IDセレクタ

* 頭に「#」を付けて、IDを指定すればいい

サンプル

// <div id="hello">Hello world</div>を指定する場合
#hello

// divの中のid="hello"を指定する場合
div#hello

３）クラスセレクタ

* 頭に「.」を付けて、CSSクラス名を指定すればいい

サンプル

// <div class="world">Hello world</div>を指定する場合
.world

// divの中のclass="world"を指定する場合
div.world

【２】応用

１）属性セレクタ

* 要素（タグ）の後に、 [] で囲んで指定する

構文

【タグ】[【属性名】="【属性値】"]

サンプル

// 
select[name=""] option[value=""]

２）複数セレクタ

* 半角カンマ「,」で区切る

サンプル

// h1 or h2 or h3 を指定する場合
h1, h2, h3

３）子孫セレクタ

* 半角スペース「 」で区切る

サンプル

// 以下のようばdivの子要素h1を指定する場合
// <div><h1 class="world">Hello world</h1></div>
div h1

// divの子要素h1中のclass="world"を指定する場合
div h1.world

４）子セレクタ

* 直近の要素を「>」で指定する

サンプル

// 以下のようばdiv->span->h1を指定する場合
// <div><span><h1>Hello world</h1></span></div>
div > span > h1

５）n番目の要素の指定

* 複数要素があって、n番目の要素の指定したい場合

構文

【要素】:nth-child(【自然数（1～）】)

サンプル

/*
<div>
  <ul>
    <li>List -1</li>
    <li>List -2</li>
    <li>List -3</li>
  </ul>
</div>
*/

// 1行目
div > ul >  li:nth-child(1)

// 2行目
div > ul >  li:nth-child(2)

// 3行目
div > ul >  li:nth-child(3)

http://www.htmq.com/selector/nth-child.shtml

参考文献

http://www.htmq.com/csskihon/005.shtml

プログラムの超個人的なメモ

Memo for Programming.

【CSS】【JS】【TS】セレクタ

■ はじめに

目次

【１】基本

１）要素セレクタ - タグ指定

２）IDセレクタ

３）クラスセレクタ

【２】応用

１）属性セレクタ

２）複数セレクタ

３）子孫セレクタ

４）子セレクタ

５）n番目の要素の指定

参考文献

関連記事

■ はじめに

目次

【１】基本

１）要素 セレクタ - タグ指定

２）IDセレクタ

３）クラスセレクタ

【２】応用

１）属性セレクタ

２）複数セレクタ

３）子孫セレクタ

４）子セレクタ

５）n番目の要素の指定

参考文献

関連記事

１）要素セレクタ - タグ指定