[CSS] 疑似要素選択子 - fist-line, first-letter, before, after

Study / Javascript, Jquery, Css 作成日付 : 2019/12/09 07:28:27 修正日付 : 2019/12/09 07:28:47

こんにちは。明月です。

前述で疑似クラス選択子に関して説明しましたが、今回は疑似要素選択子ですね。

名称が似てますが、選択対象に関しては全然違いますね。

疑似クラスの場合は同じタグのリストで何番目の要素を選択ということですが、疑似要素選択子はタグ要素を選択するという意味が近いではないかと思います。

この疑似要素はよく使いますが、特に内容を強調やiconを付ける時によく使いますね。

<!DOCTYPE>
<html>
 <head></head>
 <body>
  <p>こんにちは。<br>明月です。<br />これは練習です。</p>  
  <ul>
    <li>TEST1</li>
    <li class="new">TEST2</li>
    <li>TEST3</li>
    <li>TEST4</li>
    <li class="note">TEST5</li>
    <li>TEST6</li>
    <li>TEST7</li>
    <li>TEST8</li>
    <li>TEST9</li>
  </ul>
 </body>
</html>

/*pタグの一行目*/
p:first-line {
  color:blue;
}
/*pタグの初めの文字*/
p:first-letter {
  font-size:30px;
}
/*liタグ*/
li {
  margin:10px 0px;
}
/*liタグの前の要素*/
li.note:before{
  content:"note!"; /*「note!」という文字を入れる*/
  border:1px solid rgba(52, 94, 236, 0.51);
  margin:0px 5px;
  border-radius:5px;
  color:rgba(224, 89, 89, 0.88);
  background-color:rgba(102, 255, 253, 0.39);
  font-weight:bold;
  padding:1px;
  font-size:9px;
}
/*liタグの後の要素*/
li.new:after{
  content:"new"; /*「new」という文字を入れる*/
  color:red;
  font-weight:bold;
  font-size:9px;
  margin:0px 5px;
}

「first-line」は「p」、「span」、「div」タグなどの文字列を入れられるタグに使う選択子です。

文字列で一行目だけ反映する選択子、つまり「br」タグの前までの適用される選択子です。タグの形式ではなく、文字列で選択する特徴をもっています。

「first-letter」の場合、初めの文字だけ反映する選択子です。日本語より英語で似合う選択子で、筆者も使ったことがないですね。

そして「before」と「after」はタグの前後に「content」の値を入れるタグです。