ほんっとにはじめてのHTML5とCSS3：【65】CSSのセレクターを整理しよう（セレクター一覧）

【65】CSSのセレクターを整理しよう（セレクター一覧）

最終更新日：2023年12月20日　（初回投稿日：2022年10月20日）

今回から、CSSのセレクター（Selectors）についてまとめていこうと思います。

ずいぶん前の記事 【3】id とか classって何？（セレクタの「種類」を知っておこう）でざっくりと セレクターの種類について書いていますが、もっと詳しくサンプルを作って試していこうと思います。

今回はまずは「セレクター一覧いちらん」です。

本日のINDEX

CSSのセレクターとは

以前の記事（【2】CSSはどうやって使うの？）のおさらいになりますが、CSSは、

セレクター { プロパティ : 値 }

というカタチで指定します。

セレクターがセレクトしているのは要素。
CSSは、この要素の、{ このスタイルを : こうする } って指定です。
指令を出す相手はブラウザです。

正確には、指令を出す相手は UA（User Agent ユーザーエージェント）です。
UAとは、User（ユーザー）Agent（代理者）。Web上のデータを注文通りに見せてくれるモノ。
「Webサービスを見るためにユーザーが使うハードウェアやソフトウェア（の情報）」をUAと呼ぶんだそうです。普通にWebページを見るならブラウザがUAです。
ブラウザのほかには、
・スマホなどのアプリ
・Webクローラ（Web上のデータを巡回・分析してデータベース化するソフトウェア）
なども UA と呼ぶそうです。

セレクターにはたくさんの種類があって、大きく分けると、
[1] 要素名や、要素の属性や、結合子による組み合わせで選択するセレクター
[2] 擬似クラス
[3] 疑似要素
の3つがあります。

CSSの初期（Level 1）は、単純なものだけでしたが、Level が進むに連れて数が増えました。
特に「擬似クラス」はどんどん新しいものが増えていってます。
セレクターはW3Cの仕様書は、今は Level 3 が勧告済みで、Level 4 は編集者草案の段階です。
（2022年10月記）

CSSのセレクター一覧

下の一覧は、W3C仕様書の「Selectors Level 4」にあるものでブラウザがある程度対応しているものと、疑似要素は「CSS Pseudo-Elements Module Level 4」（別モジュール）のものをリストにしました。

★順番は仕様書とは変えています。昔からある Level 1、2 がなるべく前にくるようにしています。
★今後それぞれのセレクターの記事ができ次第、この↓ 一覧から記事へのリンクを貼ります。

要素名、結合子、属性によるセレクター

エレメンタルセレクター（要素名で指定するセレクター）
*（ユニバーサルセレクター）	すべての要素
T	任意のT要素
結合子（要素名を結合子でつないでより詳しく指定する）
E F（半角スペースで区切る）	E要素の子孫にあたるF要素
E > F	E要素の子要素であるF要素
E + F	E要素の兄弟要素でEの直後にあるF要素
E ~ F	E要素の兄弟要素でEより後にあるF要素
属性セレクター（属性名やその値で指定するセレクター）
E[att]	att属性を持つE要素
E[att="val"]	att属性の値がvalなE要素
E[att~="val"]	att属性の値のリストのうちvalがあるE要素
E[att\|="val"]	att属性の値がハイフン区切りでvalから始まるE要素
E[att^="val"]	att属性の値の文字列がvalから始まるE要素
E[att$="val"]	att属性の値の文字列がvalで終わるE要素
E[att*="val"]	att属性の値の文字列にvalが含まれるE要素
E[att="val" i]	att属性の値が大文字小文字無視でvalなE要素
E[att="val" s]	att属性の値が大文字小文字もvalに一致するE要素
E.val	クラス属性の値がvalのE要素
E#val	ID属性の値がvalのE要素

擬似クラス

ロケーション擬似クラス
:link	未訪問なリンク元である要素
:visited	訪問済みなリンク元である要素
:any-link	リンク元である要素（:link か :visited に一致する要素）
:target	現在のURLでターゲットのリンク先になってる要素
:target-within	:targetな要素か、それを子孫として含む要素
:local-link	現在のURLをターゲットするリンク元である要素
ユーザーアクション擬似クラス
:active	ユーザーによってアクティブ（クリックとか）になっている要素
:hover	ユーザーがアイテムを指した状態の要素（マウスオーバーとか）
:focus	フォーカスを持つ要素（フォーム関連の要素）でフォーカス状態になってる要素
:focus-within	:focusな要素か、それを子孫として含む要素
:focus-visible	フォーカスな要素で、UA（ブラウザ）がフォーカスリングを表示する要素
ツリー構造擬似クラス
:root	文書のルートな要素。 HTMLでは、ふつうは <html> 要素
:empty	ホワイトスペース以外の子がない要素
Child-indexed 擬似クラス
:nth-child( )	兄弟要素の中での順番に数えて選択される要素
:nth-last-child( )	兄弟要素の中での末尾から逆方向に数えて選択される要素
:first-child	兄弟要素の中での最初の要素
:last-child	兄弟要素の中での最後の要素
:only-child	兄弟がいないオンリーワン要素（:first-child:last-child または :nth-child(1):nth-last-child(1) と同じ）
Typed Child-indexed 擬似クラス
:nth-of-type( )	同じタイプの兄弟要素の中で順番に数えて選択される要素
:nth-last-of-type( )	同じタイプの兄弟要素の中での末尾から逆方向に数えて選択される要素
:first-of-type	同じタイプの兄弟要素の中での最初の要素
:last-of-type	同じタイプの兄弟要素の中での最後の要素
:only-of-type	同じタイプの兄弟がいない要素（:first-of-type:last-of-type と同じ）
言語擬似クラス
:dir( )	書字方向が( )内に一致する要素
:lang( )	言語指定が( )内に一致する要素
インプット擬似クラス（フォーム関連の要素に対するセレクター）
:enabled	入力可能な要素
:disabled	入力が不能化された要素
:read-only	ユーザーが内容変更できない要素
:read-write	ユーザーが内容を編集できる要素
:placeholder-shown	現在プレイスホルダーテキストを示している要素
:autofill	<input> 要素の値がブラウザーによって自動補完された時（大抵のブラウザで、この擬似クラスではスタイルの上書きは不可らしいけど）
:default	選択肢の中で、既定の選択肢（デフォルト）にされている要素
:checked	ラジオボタンやチェックボックスで選択されている要素
:indeterminate	不定な（チェックの有無が未設定な）状態にある要素
:valid	入力値が妥当（形式や文字数などが）な要素
:invalid	入力値が妥当でない要素
:in-range	入力値が範囲内である要素
:out-of-range	入力値が範囲内でない要素
:required	入力が必須な要素
:optional	入力が必須でない要素
:blank	値が空欄である（空／欠落している）要素
:user-invalid	ユーザーがフォームを提出しようと試みてから再びフォーム要素と有意にやりとりするまでの間、入力値が妥当でない（:invalid ／ :out-of-range ／ :requiredだが未入力とか）要素
論理コンビネーション擬似クラス
:not( )	( )内のリストに一致しない要素
:is( )	リストのどれか1つに一致する要素（:matches()が改名された）
:where( )	( )内のリストのどれか1つに一致する要素 :isより（というか他のどのセレクタよりも）詳細度が低い=ほかのセレクタの指定に上書きされる（優先度が低い）
:has( )	リストに対し該当する要素が一つ以上の要素（at-risk）
格子構造のための擬似クラス
:nth-col(n)	n個目のカラムに属するセルを表現する要素
:nth-last-col(n)	最後からn個目のカラムに属するセルを表現する要素
定義済み :defined 疑似クラス
:defibed	定義されているすべての要素（CustomElementRegistry.define() メソッドを使用して定義にしたカスタム要素を、定義されるまで非表示にするなどに使用する）

擬似要素

タイポグラフィック疑似要素
::first-line	ブロックレベル要素の最初の行のスタイルを指定する
::first-letter	ブロックレベル要素の最初の文字のスタイルを指定する
ツリーに留まる (Tree-Abiding) 疑似要素
::before	選択した要素の最初の子要素として擬似要素を生成する
::after	選択した要素の最後の子要素として擬似要素を生成する
::marker	リスト項目のマーカーボックス (黒丸や番号) を指定
::placeholder	<input> <textarea> 要素のプレイスホルダー文字列を指定
::file-selector-button	<input type="file"> のボタンのスタイルを指定する
ハイライト疑似要素
::selection	ユーザーが選択したテキストを指定する
::target-text	ブラウザがscroll-to-textフラグメントに対応している場合に、スクロール先のテキストを指定する
::spelling-error	綴りが正しくないとブラウザが判断したテキストの区間を指定
::grammar-error	文法的に正しくないとブラウザが判断したテキストの区間を指定

次回予告

セレクター、この「ほんっとに」内でコピペできるようにしたいと、ずっと思っていたんですよね。
擬似クラス使う時、うろ覚えだったら普通に検索して他所のサイト見てましたしw
あまり使ったことがないセレクターも、これを機会に勉強していこうと思います。

さて、ということで次回からセレクターを順に1つずつ見ていきましょう。
まず次回は要素名のセレクターから。これは基本中の基本のセレクターです。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2023-12-20（Wed）│
投稿日：2022-10-20（Thu）│
カテゴリ：はじめてのCSS

Pagetop ↑

« next ホーム prev »

コメントの投稿