53.疑似クラスとは違う？疑似要素。 ～指定した要素の「内容」にスタイル適用したり、要素を生成して差し込んだり～
え、疑似クラスと疑似要素違うの？
擬似クラスを調べた時に初めて知りました。
擬似クラスは、指定した要素の状態に対してスタイルを適用するもの。
それに対して、疑似要素はどんなものでしょうか。
では、早速やっていきましょう。
疑似要素とは
「指定した要素「内」の特定部分にスタイルを適用したり、指定した要素の前後に新たに要素を生成したりするものです。」
どんな種類があるのか。
- ::after
- ::backdrop Experimental
- ::before
- ::cue
- ::cue-region
- ::file-selector-button
- ::grammar-error Experimental
- ::marker Experimental
- ::part() Experimental
- ::placeholder Experimental
- ::selection
- ::slotted()
- ::spelling-error Experimental
- ::target-text Experimental
多い…。
とはいえ、調べたところ実務で主に使うのは殆どbeforeとafterのようですね。
なので今回はこの２つについて重点的に確認していきます。
因みに、疑似クラスはコロンが１つ、疑似要素はコロンが２つです、念のため。
::beforeと::after
これはセレクタで指定した要素の「内容」の直前または直後に、要素を生成し、生成した要素にスタイルを適用します。
また、生成した要素の「内容」に関してもCSSへ記述できてしまう。
疑似要素を初めて知った時の私は
「え、これ、やばくない？」という語彙力皆無の感無量状態でした。
例えば、
HTML
<div>
<div><a class ="test" href="#">これはテスト</a></div>
</div>
.test::before{
～適用する内容～
}
とすれば、
<div>
<div><a class ="test" href="#">★これはテスト◎</a></div>
</div>
★の位置に::beforeで要素が生成されます。また、◎の位置は::afterを指定した場合に要素が生成される位置です。
::beforeは指定した要素の開始タグの直後、コンテンツの直前に差し込まれるイメージです。
::afterはコンテンツの直後、終了タグの直前に差し込まれるイメージです。
そして、
::beforeや::afterでは
疑似要素が追加されるますが、この要素は基本インライン要素(spanやstrongなどと同じ)です。改行されることはなく、横並びで配置されます。
また、contentプロパティを設定することで、生成された疑似要素に対して内容を追加することもできます。
先ほどのCSSに
.test::before{
content : "ここがbefore";
}
と記述すると、★の位置に::beforeで要素が生成され、「ここがbefore」というテキストが記述されます。
その結果、最終的にブラウザでは
ここがbeforeこれはテスト
というテキストが表示されるのです。
そして、ここからが真骨頂。
なんと、この疑似要素
displayプロパティも変えられます。
というか基本的には要素だから驚くこともないですね。
ただ、displayプロパティが変えられると何がすごいかといえば。
高さ、幅の指定が可能になったり、
positionプロパティと組み合わせて位置を移動させたり、
自由度が格段に上がります。
そう、デザインの幅も広がるのです。
例えば、::afterを使って
.test{
position : relative;
}
.test::after{
content : "";
display : block;
width:100%;
height : 3px;
position:absolute;
top : 100%;
left : 0;
background : #ff0000;
}
みたいにすれば、positionプロパティを調整することで、
自分の好きな位置にアンダーバーを作成して配置することだって可能です。
使い方次第で、様々なことができそうですね。
今日のまとめ
- 疑似要素は要素の内容に関してのスタイル指定や、要素の生成が可能
- ::before、::afterで生成される要素はインライン要素
- 生成された要素に対して、contentプロパティで内容を追記できる。
- 生成された要素に対して、スタイル適用もできる。
本日は疑似要素についてでした。
疑似クラス、疑似要素どちらも似ていますね。
現在はデザインカンプからの、コーディングに力をいれています。
主に、カンプを見た時にHTMLの構成を検討して決定する力を養いたいのです。
ここがスタートですよね。
では、また。
