This translation is incomplete. Please help translate this article from English.
El pseudo-element CSS ::first-line aplica estils a la primera línia d'un element de nivell de bloc. Tingueu en compte que la longitud de la primera línia depèn de molts factors, incloent l'amplada de l'element, l'amplada del document i la mida de la font del text
/* Selecciona la primera línia d'un <p> */
p::first-line {
color: red;
}
CSS3 va introduir la notació de ::first-line (de dos caràcters, de dos punts) per distingir les pseudo-classes dels pseudo-elements. Els navegadors també accepten :first-line, introduït en CSS2.
Propietats permeses
Només un petit subconjunt de propietats CSS es pot utilitzar amb el pseudo-element ::first-line:
- Totes les propietats relacionades amb la font:
font,font-kerning,font-style,font-variant,font-variant-numeric,font-variant-position,font-variant-east-asian,font-variant-caps,font-variant-alternates,font-variant-ligatures,font-synthesis,font-feature-settings,font-language-override,font-weight,font-size,font-size-adjust,font-stretchifont-family - Totes les propietats relacionades amb el fons:
background-color,background-clip,background-image,background-origin,background-position,background-repeat,background-size,background-attachmentibackground-blend-mode - La propietat
color word-spacing,letter-spacing,text-decoration,text-transformiline-heighttext-shadow,text-decoration,text-decoration-color,text-decoration-line,text-decoration-styleivertical-align.
Sintaxi
/* CSS3 syntax */ ::first-line /* CSS2 syntax */ :first-line
Exemple
HTML
<p>Styles will only be applied to the first line of this paragraph. After that, all text will be styled like normal. See what I mean?</p> <span>The first line of this text will not receive special styling because it is not a block-level element.</span>
CSS
::first-line {
color: blue;
text-transform: uppercase;
/* WARNING: DO NOT USE THESE */
/* Many properties are invalid in ::first-line pseudo-classes */
margin-left: 20px;
text-indent: 20px;
}
Resultat
Especificacions
| Especificació | Estat | Comentari |
|---|---|---|
| CSS Pseudo-Elements Level 4 The definition of '::first-line' in that specification. |
Working Draft | Defineix de manera més estricta on pot apareixer una ::first-letter.Generalitza propietats permeses per a composició tipogràfica, decoració de text i propietats de disseny en línia i opacity.Defineix l'herència de ::first-letter. |
| CSS Text Decoration Module Level 3 The definition of 'text-shadow with ::first-line' in that specification. |
Candidate Recommendation | Permès lùs de text-shadow amb ::first-letter. |
| Selectors Level 3 The definition of '::first-line' in that specification. |
Recommendation | Introdueix la sintaxi de dos caràcter de dos punts. |
| CSS Level 2 (Revision 1) The definition of '::first-line' in that specification. |
Recommendation | Cap canvi |
| CSS Level 1 The definition of '::first-line' in that specification. |
Recommendation | La definició inicial fa servir la sintaxi d'un sol caràcter de dos punts. |
Navegadors compatibles
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| Descripció | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Suport bàsic | 1.0[1] | (Yes) | 1.0 (1.7 or earlier) | 9.0 | 7.0[2] | 1.0[3] |
Antiga sintaxi d'un caràcter de dos punts (:first-line) |
1.0[1] | (Yes) | 1.0 (1.7 or earlier) | 5.5 | 3.5[2] | 1.0[3] |
| Descripció | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Suport bàsic | (Yes)[1] | (Yes) | 1.0 (1) | No support | ? | ? |
Antiga sintaxi d'un caràcter de dos punts (:first-line) |
(Yes)[1] | (Yes) | 1.0 (1) | ? | ? | ? |
[1] La propietat text-transform no funciona per pseudo-elements ::first-line (tampoc per a l'antiga sintaxi d'un caràcter de dos punts). Vegeu Chromium errada 129669.
[2] Des de Opera 15.0 (a causa del canvi a Blink) la propietat text-transform no funciona per pseudo-elements ::first-line (tampoc per a l'antiga sintaxi d'un caràcter de dos punts). Vegeu Chromium errada 129669.
[3] La propietat text-transform no funciona per pseudo-elements ::first-line (tampoc per a l'antiga sintaxi d'un caràcter de dos punts). Vegeu WebKit errada 3409.