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

CSSの::最初の行の疑似要素

このCSS疑似要素は、要素のコンテンツの最初の行を選択します。ただし、テキストを含む幅が固定されていない場合、ウィンドウサイズに応じて行の長さが変わる可能性があります。

CSSの例を見てみましょう::最初の行の疑似要素-

例

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
   background-color: lightgreen;
   color: white;
}
</style>
</head>
<body>
<h2>Lorem Ipsum</h2>
<p>Phasellus id ante turpis.Vestibulum luctus justo id odio iaculis condimentum. Vestibulum sapien mauris, feugiat id posuere vitae, condimentum blandit sapien.</p>
<div id="divDisplay"></div>
<script>
divDisplay.textContent = 'Current window width: '+window.innerWidth+'px';
window.addEventListener('resize', function() {
   divDisplay.textContent = 'Current window width: '+window.innerWidth+'px';
})
</script>
</body>
</html>

出力

最初はウィンドウ幅のサイズが「606px」の場合-

CSSの::最初の行の疑似要素

ウィンドウ幅を大きくした場合-

CSSの::最初の行の疑似要素

要素を含むテキストの幅が固定され、ウィンドウのサイズが変更された場合-

CSSの::最初の行の疑似要素

CSSの別の例を見てみましょう::最初の行の疑似要素-

例

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
   background-color: #FF8A00;
   color: white;
}
div{
   width: 420px;
}
</style>
</head>
<body>
<div>
<h2>Demo Heading</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
</div>
</body>
</html>

出力

CSSの::最初の行の疑似要素


  1. CSSの@mediaAt-rules

    CSS @mediaルールは、単一のスタイルシートでさまざまなメディアタイプ（印刷、画面、すべてなど）にさまざまなスタイルを指定するために使用されます。通常、その後にメディアタイプのコンマ区切りリストと、ターゲットメディアのスタイルルールを含むCSS宣言ブロックが続きます。 構文 以下は構文です- @media not | only mediatype and (expressions) {    CSS-Code; }のみ 例 CSS@mediaルールの例を見てみましょう- <!DOCTYPE html> <html> <head>

  2. 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 {   &