CSS疑似クラスと疑似要素の使用を開始する

CSSセレクターを使用して、Webページ内の要素をターゲットにしてスタイルを設定できます。標準セレクターは、特定の段落または特定のレベルのすべての見出しをターゲットにする場合があります。疑似セレクターはさらに一歩進んで、ページの一部をよりニュアンスのあるターゲットにすることができます。

疑似クラスは、要素のさまざまな状態を対象とします。たとえば、ポインタがリンク上にあるときなどです。疑似要素を使用すると、段落の最初の行など、要素の特定の部分をターゲットにすることができます。

それで、これ以上面倒なことはせずに、疑似クラスと疑似要素の基本を説明しましょう。

疑似クラスとは何ですか?

疑似クラスは、特定の状態のHTML要素を選択するCSSセレクターです。一部の状態は、そのタイプの最初の要素など、コンテキストを参照します。その他は、リンクがマウスポインターによってホバーされているときなど、動作です。ユーザーのアクションに基づいてコンテンツのスタイルを設定できます。特に、コンテキスト状態は、柔軟で保守が容易でクリーンなコードを作成するのに役立ちます。動作状態は、JavaScriptを使用しなければならない可能性のある機能へのショートカットを提供します。

(:)は、コロンで始まるのようにして、簡単に疑似クラスを認識することができます。単純なユーザーアクション疑似クラスのいくつかのインスタンスを見てみましょう。

単純な疑似クラスの例

まず、HTMLコードを書いてみましょう。

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<header>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</header>

<section>
<p>
Voluptatum fuga, impedit sequi totam numquam assumenda repellat
tempora sapiente! Nihil unde vel recusandae, expedita aperiam tempora
totam deserunt non porro reprehenderit.
</p>

<p>
Dicta totam non iusto labore sapiente numquam hic tempora earum,
minima repellendus pariatur fugit nobis ex adipisci, tempore vitae
laboriosam harum. Quidem!
</p>

<p>
Suscipit repellendus cupiditate dignissimos eveniet beatae quas
laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
necessitatibus autem ipsam debitis libero sapiente!
</p>

<p>
Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
Molestias exercitationem in quia possimus consectetur dolorum sequi
veniam quo corporis ullam?
</p>

<p>
Suscipit repellendus cupiditate dignissimos eveniet beatae quas
laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
necessitatibus autem ipsam debitis libero sapiente!
</p>

<p>
Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
Molestias exercitationem in quia possimus consectetur dolorum sequi
veniam quo corporis ullam?
</p>

<p>
Asperiores illum beatae dolores, dolore quae exercitationem laudantium,
officia nam distinctio tempora deleniti itaque quibusdam iste quo eaque
reiciendis nostrum saepe aperiam?
</p>

</section>
</body>
</html>

同じセクション内にいくつかの段落があることに注意してください。それらを個別にスタイル設定するには、それぞれに個別のクラスを指定し、CSSクラスセレクターを使用できます。ただし、特にコンテンツが頻繁に変更される可能性がある場合、これはあまり実用的ではありません。代わりに、HTMLには存在しないが、要素をターゲットにしてスタイルを設定できる疑似クラスを使用できます。それがどのように機能するか見てみましょう:

CSS

 body {
font-size: 1em;
}
header {
font-size: 3em;
}

/* Selecting the first paragraph */
p:first-child {
font-size: 1.3em;
}

/* Selecting the last paragraph */
p:last-child {
color: red;
text-decoration: underline;
}

/* Selecting the nth paragraph */
p:nth-child(3) {
color: blue;
font-style: italic;
}
p:nth-child(4) {
color: #666;
font-size: 1.9em;
}
p:nth-child(5) {
color: yellowgreen;
font-weight: bold;
}

出力:

:first-child:nth-​​child(x) 、および:last-childのような単純な疑似クラスを使用すると、段落を簡単に選択してスタイルを設定できます。これらの疑似クラスは、子要素ではなく、段落自体を選択することに注意してください。

ユーザーアクションの疑似クラスの例

ユーザーアクションまたは動作疑似クラスは、ユーザーがドキュメントを操作するときにのみ適用されます。最も人気のある例の1つには、 :link:visited:hover 、および:focus状態が含まれます。リンクと画像の:hover状態の例を見てみましょう。

HTML

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<div class="image-box">
<img class="image-back" src="images/By_Unsplash_Search.jpg" alt="Coding on a laptop" />
<img class="img-front" src="images/By_Unsplash.jpg" alt="Search bar with blue background" />
</div>
<div>
<a href="#">Learn more about Pseudo-classes</a>
</div>
</body>
</html>

この例では、2つの画像と1つのリンクがあります。画像は同じ場所に配置されているため、一方を非表示にしてもう一方を表示することで画像を切り替えることができます。

CSS

 body {
font-family: 'Inter', sans-serif;
}
.image-box {
position: relative;
width: 70%;
margin: 5em;
color: #fff;
}
.image-box img {
display: inline-block;
position: absolute;
left: 0;
width: 70%;
}
.image-box img.img-front:hover{
opacity:0;
cursor: pointer;
}
a {
position: absolute;
bottom: 2em;
left: 3em;
text-decoration: none;
color: #222;
display: inline-block;
font-size: 2.5em;
font-weight: 600;
border-bottom: 5px solid rgb(250, 0, 0);
}
a:hover {
color: rgb(250, 0, 0);
border-bottom: none;
}

この最初の例は、リンクにカーソルを合わせた場合の効果を示しています。 CSSは色と境界線を変更します。

この2番目の例では、画像にカーソルを合わせた場合の効果を確認できます。不透明度を0に設定すると、画像が効果的に透明になります。

疑似要素とは何ですか?

疑似要素は、疑似クラスと同様に動作します。疑似クラスは既存の要素に適用されることに注意してください。一方、疑似要素は、新しいHTML要素が存在するかのように機能します。また、疑似要素は二重コロン( :)で始まります。例を使ってどのように機能するかを見てみましょう。

HTML

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<header>
<div class="header-img">
<img src="By_Unsplash.jpg" alt="Coding on a laptop" />
</div>
</header>
</body>
</html>

ここで、CSSのみを使用して、 :: before疑似要素を使用してテキスト「詳細」を追加し、 :: after疑似要素を使用してテキスト「今すぐ購入」を追加します。また、 positionプロパティを適用して、親コンテナを基準にしてこれらの疑似要素を配置します

 body {
font-family: 'Inter', sans-serif;
color: #666;
}
img {
width: 30em;
vertical-align: middle;
}
.header-img::before {
content: "Learn More";
color: #fff;
background-color: rgb(75, 159, 192);
padding: 0.3em 5em;
display: inline-block;
position: absolute;
top: 25px;
left: -70px;
transform: rotate(-45deg);
}
.header-img::after {
content: "Buy Now";
color: #fff;
background-color: rgb(212, 115, 91);
padding: 0.3em 5em;
display: inline-block;
position: absolute;
bottom: 25px;
right: -70px;
transform: rotate(-45deg);
}
header {
position: relative;
overflow: hidden;
font-weight: 600;
}
header,
section {
width: 30em;
}

最終的な効果は、画像の左上と右下に「リボン」のようなラベルをオーバーレイします。

疑似クラスと疑似要素を手に入れよう

CSS疑似クラスと疑似要素を適切に使用すると、多くの可能性への扉が開かれます。最初は圧倒されるかもしれませんが、このテクニックを実践することは、Webデザインスキルを向上させるための鍵です。重要なのは、Google ChromeのDevToolsなどの機能を利用して、常にデザインを徹底的にテストすることです。

疑似クラスと疑似要素の基本を学んだことを願っています。学習は決して止まらないことを忘れないでください!したがって、新しいCSSセレクターの調査を続け、次のプロジェクトでそれらを実装してテストしてみてください。