CSSセレクタと仮想クラス

コネクションセレクタ
選択者を選択者に関連付けて適用範囲を限定する(コンビネーションセレクタ)
🌟 サブセレクタ

指定したすべてのサブエレメントにスタイルを適用
スタイルは、

の親要素に含まれるすべての子要素に適用されます.子セレクタとも呼ばれます.

の親要素と子要素をスペースに分割し、カッコ内で属性を指定します.

section p { color: blue; } /*section 요소 안에 있는 모든 p 요소의 글자 색을 파랑으로 지정*/

📝 サブセレクタ

サブエレメントにのみスタイルを適用

サブエレメントにのみスタイルを適用する選択者として、親エレメントと子エレメントを区別するために、2つのエレメントの間に「>」を表示します.

サブセレクタは孫要素にも適用されますが、サブセレクタは次の要素(サブ要素)にのみ適用されます.

section > p { color: blue; } /*section 바로 밑에 있는 p 요소의 글자 색을 파랑으로 지정*/

📝 隣接する兄弟セレクタ

最近の兄弟要素にスタイルを適用

などの親要素を持つ要素を兄弟関係と呼び、兄弟関係要素の中で最初に現れる要素を「形要素」と呼び、その後に現れる要素を「弟要素」と呼ぶ.

ドキュメント構造では、スタイルは同じ親を持つ兄弟要素の最初の弟要素にのみ適用されます.

選択者定義は「要素1+要素2」で表される.

h1 + p { text-decoration: underline; } /*h1 다음에 오는 p요소 중 첫번째 p요소에만 밑줄표시*/

🌟 兄弟選択者

スタイルを兄弟要素に適用

の隣接する兄弟選択者とは異なり、スタイルはすべての兄弟要素に適用されます.

選択者定義方式は「要素1~要素2」で表される.

h1 ~ p { text-decoration: underline; } /*h1 다음에 오는 모든 형제 p요소에 밑줄표시*/

画像の出所:https://innks.github.io/2017/06/05/css/css-Selector-note/
シラサギ属性セレクタ
タグで使用する属性の値に基づいてスタイルを指定します.
属性値の条件に応じて異なるスタイルを指定できます.
📝 属性セレクタ

指定したプロパティにスタイルを適用する

で指定された属性を持つ要素を見つけ、スタイルを適用します.

a [href] { background : yellow; } /* a태그 중 href속성이 있는 요소를 찾아 배경색 지정 */

属性=値セレクタ

特定の値を持つ属性にスタイルを適用
指定した属性と属性値に一致する要素を見つけ、スタイルを適用します.

a[target="_blank"] { padding : 30px } /*target속성 값이 _blank인 링크를 찾아 패딩을 30px줌*/

属性~=値セレクタ

複数の値を含む特定の値のプロパティにスタイルを適用

「属性=値」セレクタは、属性と値が完全に一致する要素を検索し、「属性~=値」セレクタは、複数の属性値の中からその値を含む要素を選択します.

属性|=値セレクタ

特定の値を含む属性にスタイルを適用

の値は1つの語で表されます.

「属性~=値」はハイフン(-)で接続された単語にスタイルを適用しませんが、「属性|=値」は属性値で指定された値、または「値-」でスタイルを適用します.

属性^=値セレクタ
スタイルは、特定の値で始まるプロパティ

に適用されます.
属性$=値セレクタ

特定の値で終了するプロパティにスタイルを適用

hrefにリンクされたファイルの拡張子アイコンを表示すると便利です.

属性*=値セレクタ

特定の値に一致する属性にスタイルを適用

任意の場所にこの値が含まれている場合、スタイルが適用されます.

仮想クラスと仮想要素
選択者であっても指定が困難なターゲットを指定すると、クラス名の前にダミー要素にコロン(:)を付け、2つのコロン(:)を付けます.
📝 ユーザーの動作に応答する仮想クラス
1.:仮想クラスセレクタのリンク
アクセスされていないリンクにスタイルを適用
2.:アクセスする仮想クラスセレクタ
アクセスしたリンクにスタイルを適用
3.:hover仮想クラスセレクタ
Web要素にマウスカーソルを合わせたときのスタイルの適用
4.:アクティブな仮想クラスセレクタ
Web要素のアクティブ化時のスタイルの適用
5.フォーカス仮想クラスセレクタ
Web要素にフォーカスしたスタイルの適用

番から4番までがlink>:アクセス済み>:hover>:アクティブな順序で定義されている場合.

📝 UI要素の状態に基づく仮想クラス
UI要素のステータスに応じた仮想クラスは、Web要素のステータスに応じて、Webサイトまたはアプリケーションの画面を設計するときにスタイルを指定するために使用されます.
1.:enabled/:無効な仮想クラスセレクタ
エレメントが使用可能な場合と使用できない場合のスタイルを指定します.
ex)入力ウィンドウと読み出し前の差異
2.:選択した仮想クラスセレクタ
ラジオボックスまたはチェックボックスでアイテムを選択するときのスタイルの指定
📝 構造仮想クラス
Webドキュメント構造に基づいて特定の場所の要素を検索し、スタイルを指定します.
1.:root仮想クラスセレクタ
ドキュメント全体に適用
HTMLドキュメントでは、ルート要素がHTMLであるため、スタイルがHTML要素に適用されます.
2.:nth-child(n)/nth-last-child(n)仮想クラスセレクタ
サブエレメントの位置に応じたスタイルの適用
:nth-child(n)は前のnサブエレメントにスタイルを適用し、nth-last-child(n)は最後からn番目のサブエレメントにスタイルを適用します.
場所に応じてスタイルを適用する選択者には、これらの要素に親要素がある必要があります.
=ドキュメント構造に表示されるすべての要素は、同じレベルの要素でなければなりません.
3.:n次タイプ(n)/n次最終タイプ(n)仮想クラスセレクタ
特定のタグ位置にスタイルを適用する
:nth-of-type(n)は前から数えたn番目の要素であり、nth-last-of-type(n)は最後からn番目の要素にスタイルを適用します.
4.:first-child/:last-child仮想クラスセレクタ
最初の要素と最後の要素にスタイルを適用
5.:first-of-type/last-of-type仮想クラスセレクタ
兄弟関係要素の位置に基づいてスタイルを適用
6.:only-child/:only-of-type仮想クラスセレクタ
スタイルを一意のサブエレメントに適用
その他の仮想クラス
:ターゲット仮想クラスセレクタ
アンカー先にスタイルを適用
ページを移動するときはリンク(link)を使用し、同じドキュメントで他の場所に移動するときはアンカーを使用します.
この場合、targetセレクタを使用して、アンカーで接続されている部分(アンカー先となる部分)のスタイルを指定します.
:not仮想クラスセレクタ
特定の要素以外の場合のスタイルの適用
「カッコ内の要素を含まない」

p:not(#ex) { color: blue; } /*#ex가 아닌 모든 p요소의 글자 색 지정*/

📝 仮想要素
::first-line要素/:first-letter要素
最初の行の最初の文字にスタイルを適用
:first-letter要素は要素の最初の文字を指し、最初の文字は最初の行にある必要があります.
::before要素/::after要素
コンテンツの前後にコンテンツを追加
指定したコンテンツは、特定の要素のコンテンツの前または後に追加できます.
要素の前後にテキストや画像などを追加できます.
HTMLタグを使用せずにスタイルを仮想要素に適用できます.