CSS擬似要素と擬似クラスの簡単な紹介

導入
以下に示すように、擬似要素と擬似クラスを例証するために、非常に単純なcodepenが作成されました.別のボタンとの対話をしてください.
あなたが観察すべき相互作用

任意のボタンを押すと、そのボタンを垂直に伸ばす

場合は、垂直方向の延長に加えて、特別なボタンを乗り越えると、2行目の赤になる

特別なボタンをクリックすると、ボタンも水平に伸びます

まず、擬似要素と擬似クラスがどのようなコードから推論しようとしましょう.
擬似要素スタイルの例

button::first-line {
  color: blue;
  text-transform: uppercase;
}

擬似クラススタイルの例

 /* for all buttons */
button:hover {
  height: 100px;
}

/* for only the special button */
.special:hover {
  color: red;
  font-weight: 600;
}

.special:active {
  width: 400px;
}

観測される構文の違いは次のようになります.

擬似要素->::

擬似クラス->:

擬似セレクタの名前は、意図された効果も明らかにする.例えば、

::first-line セレクターは、要素の最初の行にのみ適用されます.codepenでは、すべての3つのボタンがテキストの行の区切りを持っているので、最初の行だけが青色です.

:hover ユーザーがそれを乗り越えるときだけ、要素に適用されます

:active それがアクティブな状態の場合、要素にのみ適用されます.

上記の結果は、以下の擬似セレクタの簡単な定義に対応します.

Pseudo-elements are used to style a specific part of an elementPseudo-class are used to style specific states of an element

Codepenからの面白い観察
Codepenの特別なボタンのために.special:hover スタイルが適用され、2行目のみ赤になります.最初の行は、擬似要素クラスのため、まだ青のままです.
これはカスケーディングスタイルシートの特異性の点である.:: > :クールな?
次にいくつかの質問をしてみましょう.

どのようにして擬似要素と擬似クラスセレクタがどのように利用できるかを知ることができますか?

どのように、我々は擬似セレクタが適用されるということを知っていますか?

なぜ私はこの概念を気にする必要がありますか?

1 .擬似要素と擬似クラスがどのように利用できるかをどうやって知るか.
2021年9月のMDN Webドキュメントからこの論文を発行した時点で、実験セレクタを除いて、合計8つの擬似要素と48の擬似クラスがあります.また、48の擬似クラスは、7つのカテゴリーに分けられます.以下の表にまとめました.

すべてを暗記する必要がありますか?もちろん!
しかし、他より一般的に使用されるいくつかがあります.私が読んだ多くの記事と私が取り組んだWeb devプロジェクトの少ない数に基づいて(私は現在の仕事に参加した後に非常に長くフロントエンド仕事に触れることができませんでした)、これらはより一般的に使用される擬似セレクタです.

擬似セレクタのいくつかを手に入れて、上で一般的に使われていないようにマーキングをするとき、私が作ったいくつかの仮定があります.

典型的なウェブ開発者は、ビデオプレーヤーを作りませんWebVTT ) 定期的に.

擬似要素::cue , :backdrop

擬似クラス:リソース状態、時間次元

典型的なWeb開発者も、アカウント言語固有のレイアウトとナビゲーションベースのスタイルを定期的に取る必要はありません.

擬似クラス:言語的位置

定期的にドメインとの作業を行う場合は、上記のリストをあなたのリストに入れてください.

2 .擬似セレクタが適用されていることをどうやって知っていますか?
これは特にデバッグのために提起された質問です、そして、そうするために、あなたはあなたのブラウザーの検査官を使うことができます.私たちはexamples from MDN Web Docのガイドから擬似クラスと擬似要素への説明を行います.
以下の例では、擬似要素.box::before 適用される.

以下の例では、最初はa:link , a:visited ユーザアクション擬似クラスを適用します.

しかし、インスペクタを使用して要素の状態を強制する場合、他のユーザーアクション擬似クラスが適用されます.:hover . 私たちは押すことによって要素の状態を強制することができます:hovボタンを押すと、それは私たちの状態のリストが表示されます強制される.要素の状態を強制しないようにしてください:focus のためにgiven example .


なぜ私は開発者としてこの概念を気にする必要がありますか?
インターネットは、多くの偉大な開発者が作成され、無料で美しいデザインシステムのコンポーネントライブラリを共有するような美しい場所です.ウェブ開発者によって与えられる一般的な正当化は、これらのライブラリが利用可能であるということです.
それが本当である間、我々が我々の製品のビジョンに合うために、そして/または、デザイナーのモックアップに彼らの忠実度にマッチするためにデザインシステム構成要素を微調整しなければならない時が、確かにあります.利用可能なそのようなコンポーネントパッケージの多くでは、彼らはすでに非常に広範な擬似クラスを含んでいました.したがって、既存のコンポーネントがどのようにこれらの値をオーバーライドする前に慎重に動作するかを調べて理解する必要があります.さもなければ、コンポーネントの1つの特定の局面を変えることによって、あなたは他の局面を破壊するのを危険にさらすかもしれなくて、おそらく意図された全体的なユーザー・インタラクションを台無しにするかもしれません.
さらに、フロントエンド開発者/UI開発者として具体的に自分自身を確立したい人にとっては、その仕事範囲はウェブ開発者とははるかに異なっている.彼らは独自のコンポーネントを作成することができるカスタムのスタイルをゼロから.

結論
この記事を読んでくれてありがとう!私は、このプライマーは、擬似要素と擬似セレクタを学び、実験を刺激するのを助けたことを願って!
あなたが読んで楽しんでいる場合は、いくつかの反応を残してください💌 そして、私に続くことを考えてください.
私もあなたからのフィードバックを受け取ることができます🌻