EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Propiedades tablas css
            Propiedades de las tablas en CSS
            11/10/2019
            prefijos css de los navegadores
            Prefijos CSS de los navegadores
            12/10/2019

            Pseudo-clases y pseudo-elementos en CSS

            Pseudo-clases pseudo-elementos

            Pseudo-clases y pseudo-elementos en CSS

            Tabla de contenidos

            • 10. Pseudo-clases y pseudo-elementos en CSS
            • 10.1. Pseudo-clases para selección de hijos o hermanos
            • 10.2. Pseudo-clases para los estados de un elemento
            • 10.3. Pseudo-elementos

            10. Pseudo-clases y pseudo-elementos en CSS

            Gracias a las pseudo-clases y los pseudo-elementos de CSS podemos realizar una selección más específica de los elementos a los que queremos aplicar un cierto estilo sin necesidad de crear una clase concreta.

            10.1. Pseudo-clases para selección de hijos o hermanos

            Las pseudo-clases más importantes para la selección de hijos o hermanos son las que se muestran en la siguiente tabla.

            Pseudo-claseDescripción
            :first-childPrimer hijo
            :last-childÚltimo hijo
            :first-of-typePrimer hermano de su tipo
            :last-of-typeÚltimo hermano de su tipo
            :only-childHijos únicos
            :only-of-typeÚnicos hermanos de su tipo
            :emptyElementos que no tienen hijos
            :nth-child(n) Enésimo elemento hijo
            :nth-last-child(n) Enésimo elemento hijo contando desde el último
            :nth-of-type(n) Enésimo hermano de su tipo
            :nth-last-of-type(n) Enésimo hermano de su tipo comenzando desde el último

            Ejemplo pseudoclases first-child, last-child y only-child:

            Vamos a utilizar las propiedades first-child, last-child y only-child para seleccionar los párrafos que sean el primer y el último hijo de un contenedor o que sea hijo único.

            p:first-child { color: red; } 
            p:last-child { color: blue; } 
            p:only-child { color: green; }

            0

            Ejemplo pseudo-clase nth-child:

            Veamos cómo funciona la pseudo-clase nth-child mediante un ejemplo en el que aprovechamos la jerarquía de los elementos para referenciar una etiqueta. En el siguiente código tenemos cuatro elementos <p> que son hermanos entre sí e hijos del elemento <div>.

            <div>
                <p>Primer párrafo</p>
                <p>Segundo párrafo</p>
                <p>Tercer párrafo</p>
                <p>Cuarto párrafo</p>
            </div>

            Utilizando la pseudo-clase nth-child() podemos seleccionar un hijo específico. El número que indiquemos entre paréntesis será la posición del hijo.

            En el siguiente código, seleccionaremos todos los párrafos que sean el primer, segundo y cuarto hijo de un contenedor (div, span, etc.).

            p:nth-child(1){ color: red; } 
            p:nth-child(2){ color: green; } 
            p:nth-child(4){ color: blue; } 

            dark

            Ejemplo odd (impar) y even (par):

            Los valores odd y even son muy útiles para seleccionar elementos pares e impares. El valor even representa elementos en posición par y el valor oddrepresenta los elementos en posición impar. En el siguiente ejemplo en el que se ha creado una tabla se muestran en verde las filas impares y en rojo las filas pares.

            tr:nth-child(odd){ color: green;}
            tr:nth-child(even){ color: red;}

            dark

            Ejercicio propuesto

            Utiliza las siguientes pseudo-clases y comprueba los resultados:

            • tr:nth-child(odd) o tr:nth-child(2n+1)Selecciona las filas impares de una tabla.
            • tr:nth-child(even) o tr:nth-child(2n)Selecciona las filas pares de una tabla.
            • :nth-child(7)Selecciona el séptimo elemento.
            • :nth-child(6n)Selecciona los elementos 6, 12, 18, etc.
            • :nth-child(3n+4)Selecciona los elementos 4, 7, 10, 13, etc.

            10.2. Pseudo-clases para los estados de un elemento

            Podemos utilizar diferentes pseudo-clases para definir las propiedades de ciertos elementos con diferentes estados. Uno de los usos más comunes es en los enlaces <a> aunque se pueden aplicar en otros elementos.

            Pseudo-claseDescripción
            :linkNo visitado por el usuario
            :visitedVisitado por el usuario
            :hoverModifica el estilo cuando un elemento apuntador pasa por encima
            :activeSe activa cuando el usuario pulsa el elemento
            :focusSe activa cuando tiene el foco sobre el elemento

            Aplica las siguientes propiedades sobre un enlace y observa las diferencias entre los distintos valores.

            a:hover {  text-decoration: overline;}
            a:active { background-color: yellow;}
            a:link { color: green;}
            a:visited { 
            color: brown;
            }

            dark

            10.3. Pseudo-elementos

            A diferencia de las pseudo-clases, los pseudo-elementos no describen un estado sino que permiten añadir estilos a una parte específica del documento. Por ejemplo, el pseudo-elemento :first-line selecciona la primera línea del elemento indicado por el selector.

            Pseudo-elementoDescripción
            ::first-linePrimera línea de texto de un elemento
            ::first-letterPrimera letra de la primera línea de texto de un elemento
            ::beforeAñade contenido al principio del documento
            ::afterAñade contenido al final del documento
            ::selectionCoge la porción del texto que se está seleccionando por el usuario

            Aplica las siguientes propiedades sobre diferentes elementos y observa las diferencias entre los distintos resultados.

            p::first-line { color: green; }
            h2::first-letter { color: blue; }
            p::after { content: " - Aloja more don";  color: red; }
            p::before { content: "*. "; }
            p::selection { color: brown; }
            
            

            dark

            Comprueba tu aprendizaje

            Dale estilo al primer hijo del elemento

            ¡Bien! ¡Has fallado!

            ¿Cuál de los siguientes NO es un pseudo-elemento de CSS?

            ¡Bien! ¡Has fallado!

            ¿Qué pseudo-clase utilizamos para cambiar el estilo cuando pasamos el ratón por encima de un enlace?

            ¡Bien! ¡Has fallado!

            ¿Cómo seleccionamos las filas impares de una tabla?

            ¡Bien! ¡Has fallado!

            Compartir

            UD3. CSS básico

            • 1. ¿Qué es CSS?
            • 2. ¿Cómo aplicar estilos CSS?
            • 3. Selectores
            • 4. Unidades de medida
            • 5. Colores y fondo
            • 6. Propiedades de texto
            • 7. Propiedades de las fuentes
            • 8. Propiedades de las listas
            • 9. Propiedades de las tablas
            • 10. Pseudo-clases y pseudo-elementos en CSS
            • 11. Prefijos CSS de los navegadores
            • 12. Buenas prácticas CSS
            • 13. Modelo de cajas: márgenes, relleno y bordes
            • 14. Posición y comportamiento de contenedores en CSS
            • 15. Formatos de las fuentes en CSS y utilización de repositorios
            • 16. Estilos en formularios CSS
            • 17. Herramientas útiles, test de verificación y referencias
            • 18. Resumen CSS
            • 19. Prácticas CSS
            • 20. Test de conocimientos CSS
            • 21. Propiedades Personalizadas CSS

            Diseño de Interfaces Web

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results