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-stretch
ifont-family
- Totes les propietats relacionades amb el fons:
background-color
,background-clip
,background-image
,background-origin
,background-position
,background-repeat
,background-size
,background-attachment
ibackground-blend-mode
- La propietat
color
word-spacing
,letter-spacing
,text-decoration
,text-transform
iline-height
text-shadow
,text-decoration
,text-decoration-color
,text-decoration-line
,text-decoration-style
ivertical-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
BCD tables only load in the browser