2

Me encuentro aprendiendo CSS y estoy viendo un poco de selectores. Los he entendido bastante bien, salvo por este que no me queda bastante claro su uso en comparación a los otros. Agradecería su ayuda.

Les muestro mi código CSS y donde es que tengo la duda

[href="https://www.facebook.com"]{ /* Esto para hacerlo con un atributo
                                    y valor especifico */
    background-color: mintcream;
}

[href^="color"]{ /* Se pintará todo lo que empiece con la palabra color */
    background-color: yellow;
}

[href*="Verde"]{ /* Si tiene el valor que indicamos, lo va a seleccionar */
    background-color: green;
}

[href$="blanco"]{ /* va a seleccionar todos los href que terminen en "blanco" */
    background-color: white;
}

[lang|="en"]{
    background-color: hotpink;
}

El que no me queda muy claro es el último, el único que no tengo documentado, no lo entendí muy bien. El contexto en el que lo estoy utilizando es un lorem ipsum en un párrafo

<p lang="en">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus laboriosam aliquam, doloribus laborum voluptatem aliquid architecto odio illum doloremque, dicta totam praesentium necessitatibus, quis eligendi in debitis soluta quidem accusamus?</p>

Muchas gracias.

1 respuesta 1

3

Significa selecciona aquel elemento que:

  • Contenga exactamente el valor 'en'
  • Comienze por el valor 'en' seguido de un '-'. Ejemplo 'en-US'

Debido a eso es justamente usado para hacer match a culturas de idioma con o sin país.

Puedes encontrar mas información de los selectores aquí: Selectores de atributo

2
  • 1
    Muchas gracias Carlos!
    – ngr
    el 14 sep. 2021 a las 2:06
  • Si te funciona, puedes marcar esta respuesta como aceptada el 14 sep. 2021 a las 3:04

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.