CSS セレクター collection_html/css_WEB-ITnose

CSS セレクターは、スタイルを設定する要素のパターンを選択するために使用されます。

「CSS」列は、プロパティが定義されている CSS バージョン (CSS1、CSS2、または CSS3) を表します。

セレクターの例 CSS の例 element 要素div p> 要素をすべて選択しますdiv>pdiv+ p[target][ターゲット=-blank][title~=flower][lang|=en]a:linka:visiteda:activea :hoverinput:focusp:最初に-文字:first-linep:first-line 各

要素の最初の行を選択します

1:first-childp:first-child

要素が親レベル スタイルの最初の子の場合にのみ指定します。

lang 属性の開始値 = "it" を持つすべての

要素を選択します

2element1~ element2p~ul p 要素の後のすべての ul 要素を選択します3[attribute^=value]a[src^="https"] src 属性値が始まるすべての要素を選択します"https" 3[attribute$=value]a[src$=".pdf"]値が ".pdf" で始まる各 src 属性を選択 終了要素 3[attribute*=value]a[src*="44lan"] src 属性値に部分文字列「44lan」が含まれる各要素を選択します 3:first-of-typep :first-of-typeその親である各 p 要素の最初の p 要素を選択します3:last-of-typep :last-of-typeは親の最後の p 要素です3:only-of-typep:only-of-type 各 p 要素を選択します その親の唯一の p 要素です3:only-childp:only-childその親の唯一の子要素である各 p 要素を選択します3: nth-child(n)p:nth-child(2) )親の 2 番目の子要素である各 p 要素を選択します3:nth-last-child(n) p:nth-last-child(2)各 p 要素を選択しますそれは、最後の子から数えて、親の 2 番目の子です 3:nth-of-type(n) p:nth-of-type(2) あるすべての p 要素を選択します親の 2 番目の p 要素3:nth-last-of-type(n)p :nth-last-of-type(2) 2 番目の p である各 p 要素を選択します最後の子から数えて親の要素 3:last-childp :last-child 親の最後の子である各 p 要素を選択します。 in置く:enabled 有効な入力要素をすべて選択します3:disabledinput:disabled無効な入力要素をすべて選択します3:checked input:checked 選択した各入力を選択してくださいelements3:not(selector):not(p) p 要素ではないすべての要素を選択します3::selection::selection:out-of-range:in-range:read-write:read-only:Optional:required:valid :invalid

.class	.intro	class="intro" を持つ要素をすべて選択	1
#id	#firstname	id="firstname "要素	1
*	*	すべての要素を選択	2
element	p	すべての 要素を選択	1
要素,要素	div,p	要素と 要素をすべて選択します	1
	1		element>element
親が 要素である 要素をすべて選択します	2		element+element
すべて選択次に、< 要素の後の p> 要素	2		[attribute]
target 属性を持つすべての要素を選択	2		[attribute=value]
target="-blank" を使用してすべての要素を選択します	2		[attribute~=value]
「flower」という単語を含む title 属性を選択します"すべての要素	2		[attribute|= language]
すべての要素を選択	2		: link
Selectすべての未訪問のリンク	1		:visited
訪問済みのリンクをすべて選択	1		:active
アクティブなリンクを選択	1		:ホバー
マウスがリンク上にあるときに選択	1		:focus
フォーカスされた入力要素で選択	2		:first-letter
各 要素の最初の文字を選択します	1
2
:before	p:before	各 要素の前にコンテンツを挿入します	2
:after	p:after	各;p> の後にコンテンツを挿入します。 element	2
:lang( language)	p:lang(it)
		3
:root	:root	ドキュメントのルート要素を選択します	3
:empty	p:empty	すべてのp要素を選択します(テキストを含む)それは持っていない任意の子ノード)	3
:target	#news:target	現在アクティブな #news 要素 (そのアンカー名を含むクリックされた URL) を選択します	3
:enabled
パーツを合わせるユーザーによって選択または強調表示されている要素の	3		:out-of-range
値が指定範囲外にある入力要素と一致します	3		:in-range
値が指定された範囲内にある入力要素と一致します	3		:read-write
はreadableと一致するために使用されます書き込み可能な要素	3		:read-only
「readonly」属性セットを持つ要素と一致するために使用されます	3		:optional
以前はオプションの入力要素を照合します	3		:required
「required」属性セットを持つ要素を照合するために使用されます	3		:valid
以下の要素を照合するために使用されます。入力値は正当です	3		:invalid
入力値が不正な要素と一致するために使用されます	3