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
            Gradientes CSS lineal y radial
            Gradientes en CSS: gradiente lineal y radial
            22/10/2019
            Transiciones en CSS
            Transiciones en CSS, estilos diferentes entre estados
            22/10/2019

            Selector de atributos en CSS

            selector de atributos css

            selector de atributos css

            En la unidad anterior vimos algunas de las pseudo-clases de CSS que nos permitían realizar una selección más específica de los elementos a los que queremos aplicar un cierto estilo. Por ejemplo, utilizábamos la jerarquía de los elementos para especificar la selección.

            En esta sección vamos a ver los selectores de atributos que nos permitirán también realizar una selección más específica de los elementos a los que queremos aplicar un cierto estilo en función de los atributos o valores que tengan asignados.

            Selector de atributos en CSS

            Los selectores de atributos permiten elegir elementos HTML en función de sus atributos y/o valores de esos atributos.

            Los tipos de selectores de atributos son los siguientes:

            • [nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado nombre_atributo independientemente de su valor. 
            • [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor.
            • [nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor.
            • [nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo, cuyo valor es una lista de valores, donde alguno comienza por valor.
            • [nombre_atributo$=valor] Selecciona aquellas etiquetas cuyo atributo acabe en ese valor.
            • [nombre_atributo^=valor] Selecciona aquellas etiquetas cuyo atributo comience por ese valor.


            Ejemplo

            A continuación se muestran algunos ejemplos de estos tipos de selectores:

            Atributo Descripción
            [href] El atributo href existe en la etiqueta.
            [href="#"] El atributo href existe y su valor es igual al texto #.
            [href\*="eniun"] El atributo href existe y su valor contiene el texto eniun.
            [href^="https://"] El atributo href existe y su valor comienza por https://.
            [href$=".pdf"] El atributo href existe y su valor termina por .pdf (es un enlace a un PDF).
            [class~="eniun"] El atributo class contiene una lista de valores, que contiene eniun.
            [lang|="es"] El atributo lang contiene una lista de valores, donde alguno empieza por es-.

            Selecciona aquellas imágenes con extensión png:

            img[src$=".png"]						

            Se muestran de color azul todos los enlaces que tengan un atributo «class», independientemente de su valor:

            a[class] { color: blue; }

            Se muestran de color azul todos los enlaces que tengan un atributo «class» con el valor «externo»:

            a[class="externo"] { color: blue; }

            Se muestran de color azul todos los enlaces que apunten al sitio «http://www.ejemplo.com».

            a[href="http://www.ejemplo.com"] { color: blue; }

            Selecciona todos los elementos de la página cuyo atributo «lang» sea igual a «en», es decir, todos los elementos en inglés

            *[lang=en] { ... }

            Selecciona todos los elementos de la página cuyo atributo «lang» empiece por «es», es decir, «es», «es-ES», «es-AR», etc.

            *[lang|="es"] { color : red } 

            Selecciona todos los enlaces que no tengan el atributo href.

            a:not([href]) { color: purple; }


            Ejemplo

            Utilizando selectores de atributos realiza los siguientes ejercicios:

            • Selecciona aquellas imágenes con extensión png y añade un borde de 5 píxeles de color rojo.
            • Muestra de color verde todos los enlaces que tengan un atributo “class”, independientemente de su valor.
            • Muestra de color rosa todos los enlaces que apunten al sitio “https://www.eniun.com”.
            • Muestra de color lila todos los enlaces que tengan un atributo “class” con el valor “externo”.
            img[src$=".png"]{border: 5px solid red;}
            a[class] { color: green; }
            a[href="https://www.eniun.com"] { color: pink; }
            a[class~="externo"] { color: purple; }

            dark

            Comprueba tu aprendizaje

            El selector equivale a las etiquetas "div" que tienen el atributo "class" con el valor "dev".

            ¡Bien! ¡Has fallado!

            Selecciona todas las imágenes y todos los enlaces que estén dentro de la etiqueta "section".

            ¡Bien! ¡Has fallado!

            Oculta todos los elementos de la página cuyo atributo "lang" sea igual a "en", es decir, todos los elementos en inglés:

            ¡Bien! ¡Has fallado!

            Ejercicios propuestos

            Actividad 6.

            • Utiliza los selectores de atributos, la pseudo-clase :not y tus conocimientos de CSS para dibujar un borde rojo (border: 3px solid red;) a todas las imágenes que no tengan el atributo “alt”. De esta forma nunca se te olvidará poner ese atributo.
            • Utiliza los selectores de atributos y el pseudo-elemento after para añadir un icono de la imagen de pdf justo detrás de todos los enlaces que apunten a un pdf .
            Compartir

            UD4. CSS Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Metaetiqueta viewport
            • 5. Sombras CSS
            • 6. Gradientes CSS
            • 7. Selector de atributos en CSS
            • 8. Transiciones en CSS
            • 9. Transformaciones en CSS
            • 10. Propiedad overflow
            • 11. Flexbox, modelo de caja flexible
            • 12. Centrar horizontal y verticalmente con CSS
            • 13. Preprocesadores Less y Sass
            • 14. Estilos, elementos y código para la composición de tu web
            • 15. Herramientas útiles y referencias CSS
            • 16. CSS Grid para maquetar contenido con rejillas

            Unidades

            • 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