::first-letter
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Phần tử giả CSS ::first-letter áp dụng kiểu cho chữ cái đầu tiên của dòng đầu tiên trong một block container, nhưng chỉ khi không có nội dung nào khác đứng trước (chẳng hạn như hình ảnh hoặc bảng inline).
Try it
p::first-letter {
font-size: 1.5rem;
font-weight: bold;
color: brown;
}
<p>
Scientists exploring the depths of Monterey Bay unexpectedly encountered a
rare and unique species of dragonfish. This species is the rarest of its
species.
</p>
<p>
When Robison and a team of researchers discovered this fish, they were aboard
a week-long expedition.
</p>
Chữ cái đầu tiên của một phần tử không phải lúc nào cũng dễ xác định:
- Dấu câu đứng trước hoặc ngay sau chữ cái đầu tiên được bao gồm trong kết quả khớp. Dấu câu bao gồm bất kỳ ký tự Unicode nào được định nghĩa trong các lớp mở (Ps), đóng (Pe), trích dẫn đầu (Pi), trích dẫn cuối (Pf), và dấu câu khác (Po).
- Một số ngôn ngữ có chữ ghép đôi luôn được viết hoa cùng nhau, như
IJtrong tiếng Hà Lan. Trong những trường hợp này, cả hai chữ cái của chữ ghép đôi đều phải được khớp bởi phần tử giả::first-letter. - Sự kết hợp của phần tử giả
::beforevà thuộc tínhcontentcó thể chèn một số văn bản vào đầu phần tử. Trong trường hợp đó,::first-lettersẽ khớp với chữ cái đầu tiên của nội dung được tạo ra này.
Note:
CSS đã giới thiệu ký hiệu ::first-letter (với hai dấu hai chấm) để phân biệt lớp giả với phần tử giả. Để tương thích ngược, các trình duyệt cũng chấp nhận :first-letter, được giới thiệu trước đó.
Hỗ trợ trình duyệt cho chữ ghép đôi như IJ trong tiếng Hà Lan còn kém. Kiểm tra bảng tương thích bên dưới để xem trạng thái hỗ trợ hiện tại.
Các thuộc tính được phép
Chỉ một tập hợp nhỏ các thuộc tính CSS có thể được dùng với phần tử giả ::first-letter:
- Tất cả thuộc tính font:
font,font-style,font-feature-settings,font-kerning,font-language-override,font-stretch,font-synthesis,font-variant,font-variant-alternates,font-variant-caps,font-variant-east-asian,font-variant-ligatures,font-variant-numeric,font-variant-position,font-weight,font-size,font-size-adjust,line-heightvàfont-family - Tất cả thuộc tính background:
background,background-color,background-image,background-clip,background-origin,background-position,background-repeat,background-size,background-attachment, vàbackground-blend-mode - Tất cả thuộc tính margin:
margin,margin-top,margin-right,margin-bottom,margin-left - Tất cả thuộc tính padding:
padding,padding-top,padding-right,padding-bottom,padding-left - Tất cả thuộc tính border: các tốc ký
border,border-style,border-color,border-width,border-radius,border-image, và các thuộc tính viết dài - Thuộc tính
color - Các thuộc tính CSS
text-decoration,text-shadow,text-transform,letter-spacing,word-spacing(khi phù hợp),line-height,text-decoration-color,text-decoration-line,text-decoration-style,box-shadow,float,vertical-align(chỉ khifloatlànone)
Cú pháp
::first-letter {
/* ... */
}
Ví dụ
Chữ cái lớn cơ bản
Trong ví dụ này chúng ta sẽ dùng phần tử giả ::first-letter để tạo hiệu ứng chữ cái lớn (drop cap) trên chữ cái đầu tiên của đoạn văn ngay sau <h2>.
HTML
<h2>My heading</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat.
</p>
CSS
p {
width: 500px;
line-height: 1.5;
}
h2 + p::first-letter {
color: white;
background-color: black;
border-radius: 2px;
box-shadow: 3px 3px 0 red;
font-size: 250%;
padding: 6px 3px;
margin-right: 6px;
float: left;
}
Kết quả
Hiệu ứng trên dấu câu đặc biệt và ký tự không phải Latin
Ví dụ này minh họa hiệu ứng của ::first-letter trên dấu câu đặc biệt và các ký tự không phải Latin.
HTML
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat.
</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>"特殊的汉字标点符号开头。</p>
CSS
p::first-letter {
color: red;
font-size: 150%;
}
Kết quả
Tạo kiểu chữ cái đầu trong phần tử text SVG
Trong ví dụ này, chúng ta dùng phần tử giả ::first-letter để tạo kiểu cho chữ cái đầu tiên của phần tử <text> SVG.
Note: Tính năng này hiện có hỗ trợ hạn chế.
HTML
<svg viewBox="0 0 300 40">
<text y="30">First letter in <text> SVG</text>
</svg>
CSS
text {
font-family: sans-serif;
}
text::first-letter {
font-family: serif;
font-size: 2rem;
font-weight: 600;
fill: tomato;
stroke: indigo;
}
Kết quả
Đặc tả
| Thông số kỹ thuật |
|---|
| CSS Pseudo-Elements Module Level 4 # first-letter-pseudo |