CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの::first-letter疑似要素

このCSS疑似要素は、要素のコンテンツの最初の文字を選択します。ただし、要素がインラインレベルの場合、これは機能しません。

例

CSS::first-letter疑似要素-

の例を見てみましょう 
<!DOCTYPE html>
<html>
<head>
<style>
div{
   background-color: #32485d;
   border: 5px solid black;
   color: #959799;
}
p::first-letter {
   font-size: 1.5em;
   color: #f9f9f9;
   padding: 2px;
}
</style>
</head>
<body>
<div>
<h2>Eclipse IDE</h2>
<p>"Eclipse is an integrated development environment (IDE) for Java and other programming languages 
like C, C++, PHP, and Ruby etc. Development environment provided by Eclipse includes the Eclipse Java 
development tools (JDT) for Java, Eclipse CDT for C/C++, and Eclipse PDT for PHP, among others."</p>
</div>
</body>
</html>

出力

これにより、次の出力が生成されます-

CSSの::first-letter疑似要素

例

CSS::first-letter疑似要素の別の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
   font-size: 1.5em;
   background-color: black;
   color: #dc3545;
   padding: 2px;
}
</style>
</head>
<body>
<div>
<h2>Machine Learning Tutorials</h2>
<p>TensorFlow</p><p>Machine Learning with Python</p><p>Time Series</p><p>PyTorch</p>
</div>
</body>
</html>

出力

これにより、次の出力が生成されます-

CSSの::first-letter疑似要素


  1. CSSの：n番目の子の疑似クラス

    CSS：nth-​​child（）疑似クラスは、他の要素のn番目の子要素である要素を選択します。 構文 以下は構文です- :nth-child(){    /*declarations*/ } 例 CSSの例を見てみましょう：nth-​​child（）疑似クラス- <!DOCTYPE html> <html> <head> <title>CSS :nth-child() Pseudo Class</title> <style> form {    width:70%;  

  2. CSSのborder-colorプロパティ

    CSSのborder-colorプロパティは、要素の境界線の色を指定するために使用されます。また、border-top-color、border-right-color、border-left-color、border-right-colorプロパティを使用して、個々の辺の色を設定することもできます。 構文 CSSborder-colorプロパティの構文は次のとおりです- Selector {    border-color: /*value*/ } 次の例は、CSSのborder-colorプロパティ-を示しています。 例 <!DOCTYPE html>