47-Selectores de los atributos

---

Acordeon de los indices

Style HTML Elements With Specific Attributes

• CSS [attribute] Selector
• CSS [attribute="value"] Selector
• CSS [attribute~="value"] Selector
• CSS [attribute|="value"] Selector
• CSS [attribute^="value"] Selector
• CSS [attribute$="value"] Selector
• CSS [attribute*="value"] Selector
• Styling Forms
• All CSS Attribute Selectors

CSS [attribute] Selector

El selector CSS [attribute] se utiliza para seleccionar elementos que tienen un atributo específico, sin importar su valor. A continuación se presentan algunos ejemplos prácticos de cómo usar este selector.

Ejemplo 1: Seleccionar enlaces con el atributo 'target'

En este ejemplo, se seleccionan los enlaces que tienen el atributo target y se les aplica un fondo amarillo.

Este es el código CSS para seleccionar los enlaces con el atributo target:

/* CSS */
a[target] {
    background-color: yellow;
}

            

HTML:

w3schools.com
disney.com
wikipedia.org

            

En este caso, los enlaces con el atributo target tendrán un fondo amarillo, ya que el selector CSS los selecciona a todos.

Ejemplo 2: Seleccionar elementos con el atributo 'href'

Este ejemplo aplica un color azul a todos los enlaces que contienen el atributo href.

Este es el código CSS para seleccionar los enlaces con el atributo href:

/* CSS */
a[href] {
    color: blue;
}

            

HTML:

Enlace a ejemplo.com
Enlace a otro ejemplo

            

Los enlaces con el atributo href tendrán un texto azul.

Volver al índice

---

CSS [attribute="value"] Selector

El selector CSS [attribute="value"] se utiliza para seleccionar elementos que tienen un atributo específico con un valor determinado. A continuación se muestra un ejemplo práctico de cómo usar este selector.

Ejemplo 1: Seleccionar enlaces con el atributo 'target' con valor '_blank'

En este ejemplo, se seleccionan los enlaces que tienen el atributo target="_blank" y se les aplica un fondo amarillo.

Este es el código CSS para seleccionar los enlaces con el atributo target="_blank":

/* CSS */
a[target="_blank"] {
    background-color: yellow;
}

            

HTML:

w3schools.com
example.com
wikipedia.org

            

En este caso, los enlaces con el atributo target="_blank" tendrán un fondo amarillo, ya que el selector CSS los selecciona específicamente por su valor.

Volver al índice

---

...

CSS [attribute~="value"] Selector

El selector CSS [attribute~="value"] se utiliza para seleccionar elementos cuyo atributo contiene una lista de valores, y uno de esos valores coincide con el valor especificado. A continuación se presenta un ejemplo práctico de cómo usar este selector.

Ejemplo 1: Seleccionar elementos con el atributo 'class' que contiene el valor 'primary'

En este ejemplo, se seleccionan los elementos que tienen el atributo class y que contienen el valor primary en su lista de clases.

Este es el código CSS para seleccionar los elementos con el atributo class que contiene la palabra primary:

/* CSS */
div[class~="primary"] {
    background-color: yellow;
}

            

HTML:

Card with primary class
Card with secondary class
Featured primary card

            

En este caso, los elementos con la clase primary tendrán un fondo amarillo, ya que el selector CSS los selecciona por el valor de su clase.

Volver al índice

---

CSS [attribute|="value"] Selector

El selector CSS [attribute|="value"] se utiliza para seleccionar elementos cuyo atributo contiene un valor específico o un valor que es una lista separada por guiones, donde el primer valor coincide con el valor especificado. Este selector se usa comúnmente para seleccionar elementos con atributos como el idioma en un atributo lang. A continuación se presenta un ejemplo práctico.

Ejemplo 1: Seleccionar elementos con el atributo 'lang' que comienza con 'en-'

En este ejemplo, se seleccionan los elementos que tienen el atributo lang que comienza con el valor en- (como en-US, en-GB, etc.) y se les aplica un fondo amarillo.

Este es el código CSS para seleccionar los elementos con el atributo lang que comienza con el valor en-:

/* CSS */
html[lang|="en"] {
    background-color: yellow;
}

            

HTML:

    
Contenido en inglés (Estados Unidos)


    
Contenido en inglés (Reino Unido)


    
Contenido en español (España)


            

En este caso, los elementos con el atributo lang que comienza con en tendrán un fondo amarillo, ya que el selector CSS los selecciona por el valor de este atributo.

Volver al índice

---

CSS [attribute^="value"] Selector

El selector CSS [attribute^="value"] se utiliza para seleccionar elementos cuyo atributo empieza con el valor especificado. A continuación se presenta un ejemplo práctico de cómo usar este selector.

Ejemplo 1: Seleccionar enlaces cuyo atributo 'href' empieza con 'https'

En este ejemplo, se seleccionan los enlaces cuyo atributo href empieza con el valor https, es decir, enlaces seguros.

Este es el código CSS para seleccionar los elementos cuyo atributo href empieza con https:

/* CSS */
a[href^="https"] {
    color: green;
}

            

HTML:

Enlace seguro 1
Enlace seguro 2
Enlace no seguro

            

En este caso, los enlaces cuyo atributo href empieza con https tendrán un texto verde, ya que el selector CSS los selecciona específicamente.

Volver al índice

---

CSS [attribute$="value"] Selector

El selector CSS [attribute$="value"] se utiliza para seleccionar elementos cuyo atributo termina con el valor especificado. Este selector es útil cuando deseas seleccionar elementos con atributos cuyo valor final coincide con un valor específico. A continuación se presenta un ejemplo práctico de cómo usar este selector.

Ejemplo 1: Seleccionar enlaces cuyo atributo 'href' termina con '.com'

En este ejemplo, se seleccionan los enlaces cuyo atributo href termina con el valor .com, es decir, enlaces que conducen a dominios .com.

Este es el código CSS para seleccionar los elementos cuyo atributo href termina con .com:

/* CSS */
a[href$=".com"] {
    color: blue;
}

            

HTML:

Enlace a example.com
Enlace a test.com
Enlace a noncom.org

            

En este caso, los enlaces cuyo atributo href termina con .com tendrán un texto azul, ya que el selector CSS los selecciona específicamente por ese valor al final del atributo.

Volver al índice

---

CSS [attribute*="value"] Selector

El selector CSS [attribute*="value"] se utiliza para seleccionar elementos cuyo atributo contiene el valor especificado en cualquier parte del atributo. Este selector es útil cuando deseas seleccionar elementos con atributos cuyo valor contiene una subcadena específica. A continuación se presenta un ejemplo práctico de cómo usar este selector.

Ejemplo 1: Seleccionar enlaces cuyo atributo 'href' contiene 'example'

En este ejemplo, se seleccionan los enlaces cuyo atributo href contiene el valor example en cualquier parte de la cadena.

Este es el código CSS para seleccionar los elementos cuyo atributo href contiene example:

/* CSS */
a[href*="example"] {
    color: purple;
}

            

HTML:

Enlace a example.com
Enlace a testexample.com
Enlace a nonexample.org

            

En este caso, los enlaces cuyo atributo href contiene la palabra example tendrán un texto morado, ya que el selector CSS los selecciona por esa subcadena presente en el atributo.

Volver al índice

---

Styling Forms

El diseño de formularios en CSS es crucial para la usabilidad y accesibilidad de un sitio web. A continuación, veremos cómo se pueden estilizar diversos elementos de formularios para hacerlos más atractivos y funcionales.

Ejemplo 1: Estilizar un formulario básico

En este ejemplo, se estiliza un formulario con campos de entrada, un área de texto y un botón de envío.

Este es el código CSS para estilizar un formulario:

/* CSS para estilizar el formulario */
form {
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
    margin: 0 auto;
}

input, textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    border: 1px solid #ccc;
}

button {
    padding: 10px 15px;
    background-color: #39a039;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #338c33;
}

            

HTML:

    Nombre:
    
    
    Correo electrónico:
    
    
    Mensaje:
    
    
    


            

En este caso, el formulario se estiliza con un fondo gris claro, bordes redondeados y un botón verde que cambia de color al pasar el ratón por encima.

Volver al índice

---

Todos los selectores de atributos CSS

En este tema, revisaremos todos los selectores de atributos CSS, que permiten seleccionar elementos basados en los atributos y sus valores. Estos son los selectores más comunes:

Selector	Ejemplo	Descripción del ejemplo
[attribute]	[target]	Selecciona todos los elementos con un atributo target.
[attribute=value]	[target="_blank"]	Selecciona todos los elementos con target="_blank".
[attribute~=value]	[title~="flower"]	Selecciona todos los elementos con un atributo title que contenga una lista de palabras separadas por espacios, una de las cuales es "flower".
[attribute|=value]	[lang|="en"]	Selecciona todos los elementos con un atributo lang cuyo valor comience con "en".
[attribute^=value]	a[href^="https"]	Selecciona todos los elementos cuyo atributo href comience con "https".
[attribute$=value]	a[href$=".pdf"]	Selecciona todos los elementos cuyo atributo href termine con ".pdf".
[attribute*=value]	a[href*="w3schools"]	Selecciona todos los elementos cuyo atributo href contenga la subcadena "w3schools".

Volver al índice

---

Ir al índice

---

---