Facebook Twitter Instagram
    • Sobre nosotros
    • Herramientas SEO
    • Ver mas temas
    • Más sitios que te gustarán
    Facebook Twitter Instagram Vimeo
    • Inicio
    • Secciones
      • Tutoriales
        • Aprendizaje
        • Video Tutorial
        • Manuales
        • Hagalo usted mismo
        • Electricidad
        • Electronica
        • Torrent
        • Explorar todo
      • Cursos
        • Actívate
        • Autoempleo
        • Idiomas
        • Curso De HTML
        • Javascript
        • jQuery
        • Matematicas
        • Programacion
        • Python
        • Udacity
        • Diseño Web adaptativo
      • Google
        • Google Pay
        • Adsense
        • Gmail
        • Google Apps
        • Google Chrome
        • Google Cloud Platform
        • Google Consumer Surveys
        • Google Desarrolladores
        • Google Fit
        • Google Maps
        • Google Photos
        • Google Play
        • Google Translation
        • DoubleClick
        • YouTube
        • Chromebooks
      • Marketing
        • SEM
        • SEO
        • Posicionamiento
        • Contenido
        • Publisuites
        • Space Content
        • Coobis
        • Marketing
      • Ofimática
        • Microsoft
        • Suite Ofimatica
        • Access
        • Word
        • Excel
        • Powerpoint
        • Outlook
        • Microsoft Publisher
      • Windows
        • Skype
        • Windows
        • Windows 10
        • Windows 8
        • Windows 7
        • Puerta trasera de Windows
        • Microsoft Edge
      • Ciberseguridad
        • Malware
        • Ransomware
        • Virus
        • Troyano
        • Dorkbot
        • Filecoders
        • keylogger
        • Spyware
        • Jackware
        • DDoS
        • HackerOne
        • Interpol
      • Ordenadores
        • Sistemas operativos
          • Windows
          • Mac OS
          • Android
          • Linux
          • Ubuntu
          • Kali Linux
          • Ubuntu
        • hardware
        • Software
        • BIOS
        • Unidad de disco duro
        • Programacion
        • Dispositivos
        • Internet
      • Smartphone
        • Telefonos
        • Telefonia movil y telecomunicaciones
        • Desbloquear
        • Códigos NCK
        • Liberar
        • Tarjeta SIM
        • Tablet
      • Apple
        • iPhone y iPad
        • iPhone
        • iPad
        • Mac OS
        • iCloud
        • iTunes
      • Webmasters
        • Git
        • GitHub
        • Criptografia
        • Deep Web
        • Hacker
        • FTP
        • Indexar
        • Newsletter
        • Redes y VPN
        • Herramientas online
      • Android
        • Developer Android
        • Aplicaciones
        • Android Studio
        • Android Wear
        • Desarrolladores
        • SDK Platform-Tools
        • ADB...depuración Bridge
        • Fastboot
        • Root
        • Recovery
      • Desarrollo Web
        • Sistema de gestion de contenidos
        • AMP
        • Datalife Engine
        • Blogger
        • WordPress
        • Joomla
        • Bootstrap
        • Plantillas
        • @font-face
        • Schema
        • Website
        • Desarrolladores
        • Lenguaje Web
      • Diseño Web
        • Web Responsive
        • Lenguaje Web
        • Datos estructurados
        • HTML
        • CSS3
        • JavaScript
        • Ajax
        • jQuery
        • PHP
      • Sitio Web
        • Dominios
        • Hosting
        • Servidores
        • Demo DLE
        • Modulos DLE
        • Hack
        • Optimizacion
        • Google Adsense
        • Plantillas
      • Adobe
        • After Effects
        • Dreamweaver
        • Premiere Pro CC
        • Photoshop
        • Photoshop Mix
        • Lightroom
        • Illustrator
        • Adobe Muse
        • Creative Cloud
      • Criptomonedas
        • Blockchain
        • Mineria de Criptomonedas
        • Bitcoin (BTC)
        • Bitcoin Cash (BCH)
        • DASH (Dash)
        • Dogecoin (Doge)
        • Ethereum (ETH)
        • Litecoin (LTC)
        • Monero (XMR)
        • Ripple (XRP)
        • Zcash (ZEC)
        • Forex
        • Trading
      • Ganar dinero comprando
        • CashbackDeals
        • Cashback
        • Por ir de compras
        • Aklamio
        • Intercambio de tráfico
        • Justificante de pagos
        • Webs estafas
      • Trabajos
        • Atencion al cliente
        • Asistente virtual
        • Transcripcíon
        • Transcripcíones medica
        • Entrada de datos
        • De edicion y correccion
        • Mystery Shopping
        • Micro trabajos
        • Contabilidad
        • Tutoria y aprendizaje
        • Mas ingresos extras
      • Encuestas
      • PTC
        • No pierdas tiempo...
    • Smartphone
    • Tecnología
    • Estilo de vida
    • Marketing
    • Juegos

    Tutoriales En Linea


    Tutoriales En Linea » Tutorial

    CSS Reference - Tutoriales En Linea


    Administrador Por administrador En Tutorial Noticias Herramientas online 08-06-21

    Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp VKontakte Email
    Compartir
    Facebook Twitter LinkedIn Pinterest Email
    CSS Reference Pseudo-class

    ::first-line

    See also content ::after ::before ::first-letter attr()

    ::first-line is a pseudo-element used to select the first formatted line in a block-level element (such as a paragraph <p>).

    As with all pseudo-elements, it does not match any real HTML element. The ::first-line pseudo-element does not select the first line of an inline-level element; that is, an element that has display: inline. It only works on elements that have a display value of block, inline-block, table-cell, table-caption, or list-item.

    The amount of text in the first line of an element depends on a number of factors, including the width of the page, the font size, etc.

    Properties used to style ::first-line

    The ::first-line pseudo-element is similar to an inline-level element, but with certain restrictions. Only a subset of CSS properties can be used to style a ::first-line:

    • Font Properties: font, font-style, font-variant, font-weight, font-size, line-height, and font-family.
    • Background properties: background, background-color, background-image, background-position, background-repeat, background-size, and background-attachment
    • text-decoration, text-transform, letter-spacing, word-spacing and color

    User agents may apply other styles as well.

    Trivia & Notes

    The first formatted line of an element may occur inside a block-level descendant in the same flow (i.e., a block-level descendant that is not out-of-flow due to floating or positioning). For example, the first line of the div in the following example is the first line of the paragraph p (assuming that both div and p are block-level and don’t have their display changed).

    <div>
        <p>This line...</p>
    </div>
                    

    The first line of a table-cell or inline-block cannot be the first formatted line of an ancestor element. So, in the following example, the first formatted line of the div is not the line “Hello”.

    <div>
        <p style="display: inline-block">
            Hello
            <br>
            Goodbye
        </p> 
        etcetera
    </div> 
                    

    Also note that the first line of the paragraph p in the following example doesn’t contain any letters (assuming the default style for <br>). The word “First” is not on the first formatted line; the first formatted line is made up of an empty space only.

    <p><br>First...</p> 
                    

    Just like other pseudo-elements and pseudo-class selectors, ::first-line can be chained with other pseudo-classes and pseudo-elements. See the examples section below for more.

    Inheritance and Specificity

    During CSS inheritance, the portion of a child element that occurs on the first line only inherits properties applicable to the ::first-line pseudo-element from the ::first-line pseudo-element. For all other properties inheritance is from the non-pseudo-element parent of the first line pseudo element. (The portion of a child element that does not occur on the first line always inherits from the parent of that child.)

    The ::first-letter pseudo-element can be used to style the first letter of the element. The ::first-letter will inherit the styles applied using ::first-line. If both ::first-line and ::first-letter are used, the styles specified by ::first-letter override those applied by ::first-line.

    Styles applied by ::first-line will override any styles applied to the first line on the element. That is, any styles applied on a paragraph, for example, will be overridden by conflicting styles applied using ::first-line—::first-line always wins, even if the paragraph has some style rule set with an !important bash. For example:

    <p class="text" id="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non modi aspernatur accusamus repudiandae atque suscipit dolorem rerum. Iure explicabo repellendus magnam quisquam porro vitae quibusdam quam maiores fugiat! Enim, sed.
    </p>
                    

    The ::first-line pseudo-element will be used to apply styles to the first line in that paragraph.

    p::first-line {
        tetx-transform: uppercase;
    }
                    

    The text in the first line of the paragraph will be transformed to uppercase, despite the existence of each or any of the following rules in the style sheet:

    /* General type (tag) selector */
    p {
        text-transform: lowercase;
    }
    
    /* Class selector */
    .text {
        text-transform: lowercase;
    }
    
    /* ID selector */
    #text {
        text-transform: lowercase;
    }
    
    /* ID selector with !important bash */
    #text {
        text-transform: uppercase !important;
    }
                    

    The style applied by the ::first-line rule will override each of the styles applied using the above four selectors.

    Different notations: (:) and (::)

    You will most likely come across (or have come across) the notation :first-line which uses one colon instead of two.

    In CSS1 and CSS2, pseudo-elements were defined to start with one colon (:), just like pseudo-classes (for example :hover). In CSS3, the double colon notation (::) was introduced for pseudo-elements in order to differentiate them from pseudo-classes.

    /* old CSS2 syntax */
    p:first-line {
        /* content and styles here */
    }
    
    /* new CSS3 syntax */
    p::first-line {
        /* content and styles here */
    }
                    

    All browsers that support the two-colon notation also support the one-colon notation. Internet Explorer 8, however, does not support the two-colon notation. So, unless you need to support Internet Explorer 8 or older versions, you can use the two-colon notation without having to worry about browser support.

    In all the demos in this entry, the one-colon syntax is used to provide wider browser support for readers viewing the demos in IE8.

    Examples

    The following snippet will transform the words in the first-line of the first paragraph in an article to uppercase. The example uses the :first-of-type pseudo-class selector to select the first paragraph in the article.

    /* chaining ::first-line with the :first-of-type selector */
    p:first-of-type::first-line {
        text-transform: uppercase;
        font-weight: bold;
    }
                    

    The following line of CSS would have no effect on the first line of the paragraph because margin properties cannot be applied to ::first-line.

    p::first-line {
        margin-left: 1.5em;
    }
                    

    Live Demo

    The following demo styles the first line of paragraphs in an article. The first line is underlined, made bold, and transformed to all-uppercase letters.

    If your browser supports the :first-of-type pseudo-class selector, you should also see the first-line of the first paragraph colored in pink.

    View this demo on the Codrops Playground

    The first line of all paragraphs in the demo should be rendered in uppercase letters. If you’re on Chrome, this may not work. See the browser support section notes below for details.

    Browser Support

    The two-colon (::first-line) syntax is supported in Chrome, Firefox, Safari, Opera, Internet Explorer 9+, and on Android and iOS.

    The two-colon (::first-line) syntax introduced in CSS Level 3 is not supported in Internet Explorer 8 and earlier, only the single-colon syntax (:first-line) is supported in those versions down to version 5.5.

    Notes

    There is an old bug in Chrome that prevents text-transform from being applied to the ::first-line element.

    Further Reading

    • CSS Selectors
    • CSS Selectors Level 3

    Related Entries

    • content
    • ::after
    • ::before
    • ::first-letter
    • attr()

    Written by Sara Soueidan

    Last updated June 22, 2020 at 11:26 am by Mary Lou

    Do you have a suggestion, question or want to contribute? Submit an issue.

    Compartir Facebook Twitter Pinterest Tumblr WhatsApp VKontakte

    Post Relacionados



    Publicidad
    Etiquetas
    Tutoriales En Linea ClavesTutoriales ArticulosNoticias PostTutoría Ver todas las etiquetas
    Publicidad





    Sobre nosotros

    Tutoriales En Linea

    Es un portal web de tutoriales, cursos online y de aprendizaje que pretenden simular al maestro mostrando al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad. Leer mas...

    Tiene una pregunta? Contactar...

    Enlaces

    • Sobre nosotros
    • Ultimos tutoriales
    • Publicar tutorial
    • Ver mas temas
    • Ultimos comentarios
    • ¿Preguntas Frecuentes?
    • Derechos de autor
    • Politica de cookies
    • DMCA
    • Nuestro equipo
    • Normas

    Herramientas online

    • Buscador de recetas
    • Prueba de diseño web
    • Codificar en binarios, hexadecimales...
    • Cual es mi IP
    • Test de velocidad
    • Editor HTML
    • Test de escritura
    • Test de nutricion
    • Descargar Videos
    • Generador de datos estructurados

    Recursos

    • Analisis de tus problemas de SEO
    • Herramientas SEO
    • Generar palabras claves
    • Referencia de CSS3
    • Convertir HTML a XML
    • Acortador de URL
    • Selector de colores
    • Contador de palabras
    • Comprimir imagenes
    • Conversor a URI de datos
    • Suscribirse
    Disponible en Google Play - Google Play y el logotipo de Google Play son marcas comerciales de Google LLC.
    Facebook Twitter Instagram Pinterest Linkedin Youtube
    • Anunciarse
    • Socios externos
    • Política de privacidad
    • Términos y Condiciones
    • Sobre nosotros
    • Contactar
    © 2023 Tutoriales En Linea. Reservados todos los derechos, queda prohibida la reproducción parcial o total sin previa autorización.

    Bloqueador de anuncios detectado

    Por favor no nos hagas esto, vivimos de esto. Si no ves la publicidad en Tutoriales en linea nos haces mucho daño.

    Deshabilite su bloqueador de anuncios y vuelva a cargar la página.