cssメモ - selectors_html/css_WEB-ITnoseの詳細説明

CSS ノート - セレクターの詳細な説明

CSS はセレクターを使用して、スタイルが適用される要素を見つけます。

以下はすべてのセレクターの説明です (CSS はバージョン番号です)。

CSS セレクターの詳細説明 セレクターの例 例 説明 CSS element,elementdiv,pすべての 1element elementdiv p1element>elementelement+elementdiv+p2[attribute][target] target 属性を持つ要素をすべて選択します。 2[attribute=value][target=_blank] target="_blank" を持つ要素をすべて選択します。 2[attribute~=value][title~=flower] title 属性に単語「flower」が含まれる要素をすべて選択します。 2[attribute|=value][lang|=en] lang 属性値が "en" で始まるすべての要素を選択します。 2:linka:link未訪問のリンクをすべて選択します。 1:訪問済みa:訪問済み訪問済みのリンクをすべて選択します。 1:activea:activeアクティブなリンクを選択します。 1:hovera:hover マウスポインターが置かれているリンクを選択します。 1:focusinput:focus フォーカスを取得する入力要素を選択します。 2:first-letterp:first-letter 各

要素の最初の文字を選択します。

1:first-linep:first-line 各

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

1:first-childp:first-child 親要素の最初の子であるすべての

要素を選択します。

2:beforep:before 各

要素のコンテンツの前にコンテンツを挿入します。

2:afterp:after 各

要素のコンテンツの後にコンテンツを挿入します。

2p:lang(it):first-of-typep:first-of-type 親の最初の

要素である各

要素を選択します。

:last-of-typep:last-of-type3:only-of-typep:only-of-type:nth-of-type(n)p:nth-of-type(2) 親の 2 番目の

要素に属するすべての

を選択します。要素。

3:nth-last-of-type(n)p:nth-last-of-type(2) 上記と同じですが、最後の子要素から数え始めます。 :last-childp:last-child 親要素に属する最後の子要素である各

要素を選択します。

3:root:rootドキュメントのルート要素を選択します。 3:emptyp:empty 子要素を持たないすべての

要素 (テキスト ノードを含む) を選択します。

3:target#news:target現在アクティブな #news 要素を選択します。 3:enabledinput:enabled 有効な 要素をそれぞれ選択します。 3:disabledinput:disabled 無効になっている各 要素を選択します。 3:checkedinput:checked 選択した各 要素を選択します。 3:not(selector):not(p)

要素ではないすべての要素を選択します。

3::selection::selection ユーザーが選択した要素の部分を選択します。 3

.class	.intro	class="intro" の要素をすべて選択します。	1
#id	#firstname	id="firstname" のすべての要素。	1
*	*	すべての要素を選択します。	2
element	p	すべての 要素を選択します。	1
div>p	親要素が であるすべての 要素を選択します。	2
			:lang( language)
"it" で始まる lang 属性値を持つすべての 要素を選択します。	2
3			親の最後の 要素であるすべての 要素を選択します。
		親の唯一の 要素であるすべての 要素を選択します。	3
:only-child	p:only-childp	親要素の唯一の子要素である各 要素を選択します。	3
:nth-child(n)	p:nth-child(2)	親要素の 2 番目の子であるすべての 要素を選択します。	3
:nth-last-child(n)	p:nth-last-child(2)	最後の子要素から数えて上記と同じ。	3
		3

これらはセレクター。