We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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:

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.

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.

Vegeu també

Document Tags and Contributors

Contributors to this page: Legioinvicta
Last updated by: Legioinvicta,