CSSの疑似要素と疑似クラス

WebでCSSスタイルを変更する必要があるたびに、Toniと私はじゃんけんをして、誰がそのタスクを実行できる「幸運な男」であるかを確認します。 どうして、あなたは尋ねるかもしれませんか？ ええと、長い間、HTMLとCSSでの作業は、a **の苦痛でした。一方の端で何かを修正すると、他の場所で多くのことが壊れたからです。

しかし、実際のところ、CSSは近年大きく変化しており、その新しい機能を利用すると、Webサイトを適切かつ効果的にレイアウトおよびスタイル設定することがはるかに簡単になります。 私の意見では、最近見たCSSの大きな進歩の2つは、最初にflex （行と列をレイアウトするため）と、少し後にgrid （グリッドをレイアウトするため）を含めることです。

CSSには、作業を簡素化できる機能が満載です。 そして今日は、それらのうちの2つ、疑似要素と疑似セレクターを確認します。

CSS疑似要素を使用して「コンテンツを作成」する方法

CSS疑似要素は、DOMにノードが関連付けられていないHTMLの部分にアクセスするためのメカニズムです。 たとえば、「ドキュメントの一部」は、「段落の最初の行」、「段落の最初の文字」、または「ユーザーによる選択」であり、いずれにもノードは関連付けられていません。 ただし、疑似要素は、CSSを介して既存の要素の前後にコンテンツを作成する方法でもあります。

CSS3で使用可能な疑似要素は次のとおりです。

• ::before ：要素の前にコンテンツを追加します
• ::afte ：要素の後にコンテンツを追加します
• ::first-letter ：「block」要素の最初の文字を選択します（つまり、 displayプロパティがblock 、 inline-block 、 table-cellなどに設定されているもの）。
• ::first-line ：「ブロック」要素の最初の行を選択します
• ::selection ：訪問者が選択したドキュメントの部分を指します

ご覧のとおり、疑似要素はコロンのペア（ :: :）で始まることを特徴としています。 そして、これはあなたがそれらを使用する方法です。

ドキュメントの一部を選択する

たとえば、特定の段落の最初の行をオレンジ色で下線付きにする必要があるとします。 さて、このようなことをしてください：

 p::first-line { color: orange; text-decoration: underline; }

正しい結果が得られます。

Lorem ipsum dolorは、amet、consecteturadipiscingelitに座ります。 pharetravelitelementumのturpisinterdumの前庭mollisレオ。 Nam eget lacus sed lacusdictumscelerisque。 Proin porta ligula sed mi semper、vel interdummassaauctor。 Pellentesque et massa congue、tincidunt erat ac、tinciduntelit。 Sed acdolormetus。 Nam commodo metus sed ligulaconsecteturinterdum。 Curabitur odio est、tempor id egestas nec、aliquamatnisl。

一方、選択を変更する場合、アプローチはまったく同じです。 微調整できるCSSプロパティの数は、 color 、 background 、 cursor 、およびoutlineに制限されていることに注意してください。

 p::selection { background: #21acde; color: white; }

何かを選択したと仮定すると、次の段落で結果を確認できます。

Lorem ipsum dolorは、amet、consecteturadipiscingelitに座ります。 pharetravelitelementumのturpisinterdumの前庭mollisレオ。 Nam eget lacus sed lacusdictumscelerisque。 Proin porta ligula sed mi semper、vel interdummassaauctor。 Pellentesque et massa congue、tincidunt erat ac、tinciduntelit。 Sed acdolormetus。 Nam commodo metus sed ligulaconsecteturinterdum。 Curabitur odio est、tempor id egestas nec、aliquamatnisl。

新しいコンテンツの作成

ページにコンテンツを動的に追加するオプションもあります。 たとえば、次のようなアイテムのリストがあるとします。

 <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>

通常、リストは次のようになります。

• 一
• 二
• 三

ただし、青いバーを使用して各要素が次の要素から分離されるように調整できます。

• 一
• 二
• 三

次のように、リスト内の各項目で::after疑似要素を使用します。

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; }

::beforeおよび::after疑似要素を使用すると、多くの優れた処理を実行できます。 たとえば、1つの要素に複数の背景を組み合わせたり、ページの印刷時にリンクのURLを表示したり、フローティング要素を並べ替えたり、ブロックにラベルを付けたり、タイポグラフィを美しくしたりできます。

疑似クラスを使用してスタイルをより正確に適用する方法

CSS疑似クラスを使用すると、特定の状態にあるか、またはそれらをappartに設定する特別なプロパティを持つWebサイトの要素を選択できます。 最も一般的な（そして最も古い）例は、おそらくリンク疑似クラスです。

• a:linkは、まだアクセスしていないリンクです。
• a:visitedは、すでにアクセスしたリンクです
• a:hoverは、ホバーしているリンクです
• a:focusは、現在フォーカスされているリンクと一致します（これは、ホバーされているのと似ていますが、マウスの代わりにキーボードを使用します）
• a:activeは、現在クリックしているリンクと一致します

CSSには、約60の疑似クラスがあります。 それらの大部分では、状態に基づいてアイテムをフィルタリングできます（たとえば、ご想像のとおり、 :read-only疑似クラスを使用して読み取り専用要素を選択できます）。 しかし、このルールには、言及する価値のある興味深い「例外」がいくつかあります。

ただし、その前に、簡単に説明します。前者は単一のコロン（：）で始まり、後者は2つ（ : ::で始まるため、疑似クラスと疑似要素を区別する方法に注意してください。

「子」および「タイプの」疑似クラスを使用した要素の子の選択

リストの要素を区切るために垂直バーを追加した前に見た例を覚えていますか？ よく見ると、設定したルールが完全に機能していないことがわかります。

• 一
• 二
• 三

最後の要素には垂直バーも含まれているはずですが、含まれてはいけません。 それを削除したい場合は、次のようにすることができます。

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; } ul li:last-child::after { display: none; }

これはあなたが想像するのとまったく同じように機能します：

• 一
• 二
• 三

ご覧のとおり、私たちが行っているのは、疑似クラス:last-childを使用して新しいルールを追加することだけです。これにより、 ulリストの最後のli要素を選択し、それを取得したら、その疑似要素を非表示にすることができ::after 、 displayプロパティをnoneに設定します。

*-childおよび*-of-typeの特別な機能

*-child疑似クラスには3つのバリエーションがあります。

• :first-childは、要素の最初の子と一致します（duh！）
• :last-childも同じことをしますが、後者の場合
• :nth-child(i)は、ご想像のとおり、 i番目の要素を選択します（たとえば、 :nth-child(2)は2番目の子と一致します）

それでは、次のCSSを見て考えてみましょう。

 li strong:first-child { color: orange; text-decoration: underline; }

および次のHTMLスニペット：

 <ol> <li>Lorem <strong>ipsum</strong> dolor <strong>sit</strong> amet.</li> <li><em>Lorem</em> <strong>ipsum</strong> dolor <strong>sit</strong> amet.</li> <li>Lorem <strong>ipsum</strong> dolor <em><strong>sit</strong></em> amet.</li> </ol>

どうなると思いますか？ 原則として、3つのケースすべてで、 ipsumという単語はオレンジ色で下線が引かれているように見えます。これは、 ipsumが各li要素の最初のstrong子であるためです。 どれどれ：

1. Loremipsumdolorはアメットに座っています。
2. Loremipsumdolorはアメットに座っています。
3. Loremipsumdolorはアメットに座っています。

まあ、十分に近い。 なぜこれが起こったのか推測できますか？

:first-child疑似クラスは、要素の最初の子に適用されます。 最初の文では、 ipsumは最初のstrongタグであり、これはたまたま最初の子です。 2番目の文では、最初の子ノードはem （ Loremという単語を含む）であり、次にipsumという単語を含むstrongタグが付いています。 したがって、この強力なタグは「最初の子」ではありません。 最後に、3番目の文には、ルールに一致する2つのタグがあります。ipsum （最初の文のようなもの）とsitです。 sitが、親タグ（ em ）の最初の子であるstrongタグであることに注意してください。

では、各liアイテムの最初のstrongタグに下線を付けたい場合はどうでしょうか。 さて、別の疑似クラスを使用し、 liの直接の子である要素のみに一致することを確認する必要があります。

 li > strong:first-of-type { color: orange; text-decoration: underline; }

これは期待どおりに機能します：

1. Loremipsumdolorはアメットに座っています。
2. Loremipsumdolorはアメットに座っています。
3. Loremipsumdolorはアメットに座っています。

かなりすごいですねこの場合も、この疑似クラスには3つのバリエーションがあります。

• x:first-of-typeは、タイプがxである最初の兄弟と一致します
• x:last-of-typeは最後を選択します
• x:nth-of-type(i)は、タイプがxであるi番目の兄弟と一致します

:notで反対側を選択する

最後に、今日お話ししたかった疑似クラスは:notです。 :notは、特定のプロパティを満たさない要素に一致する疑似クラスです。 たとえば、前の例に戻りましょう。

• 一
• 二
• 三

最後の要素に表示されるバーの問題を解決するために、基本的に（1）すべてのli要素にバーを追加し、（2）最後の要素のルールを上書きして非表示にします。

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; } ul li:last-child::after { display: none; }

しかし、これはあまり最適ではないようですよね？ 最初のチュールでオーバーシュートしているので、最後の要素でスタイルを修正する必要があります。 私たちが本当に望んでいたのは、最後の要素を除くすべての要素にバーを追加することでした…

これは、疑似クラス:notを適用し、それを:last-child ：と組み合わせることで実現できます。

 ul li { display: inline; } ul li:not(:last-child)::after { color: #21acde; content: " | "; display: inline-block; }

これは、最後の要素ではないすべてのli要素（ :not(:last-child) ）にスタイルを適用します。これは、目標を完全に記述し、問題を解決します。

• 一
• 二
• 三

要約すれば

CSSの疑似要素と疑似クラスを使用すると、Webサイトのさまざまな要素にアクセスするときに非常に正確になります。 それらを使用すると、より簡潔で具体的なCSSルールを記述できます。これにより、メンテナンスが簡素化され、特定の場合に一般的なルールを継続的に上書きする必要がなくなります。

この投稿が気に入っていただけたら幸いです。気に入った場合は、お友達と共有してください。

UnsplashのJFLによる注目の画像。