Hay una variedad de formas a través de las cuales puede diseñar elementos HTML. Un enfoque fácil y potente es usar los selectores de atributos CSS. Estos selectores le permiten diseñar elementos que tengan algunos atributos o valores de atributos. Estos selectores son los siguientes.

1. [Atributo] Selector
2. [atributo = "valor"] selector
3. [atributo ~ = "valor"] selector
4. [atributo | = "valor"] selector
5. [atributo^= "valor"] selector
6. [atributo $ = "valor"] selector
7. [atributo*= "valor"] selector

Cada uno de estos se explica en detalle a continuación.

[Atributo] Selector

Con el propósito de diseñar elementos que tienen un atributo particular, se utiliza el selector [atributo].

Sintaxis

elemento [atributo]
El valor de la propiedad;

O,

[atributo]
El valor de la propiedad;

Ejemplo

Digamos que quieres peinar todos los elementos que tienen atributo alternativo, Luego use el selector [atributo] de la siguiente manera.

Html

Este es un encabezado

Este es un párrafo.

En el código anterior, hemos creado dos elementos

y

. El

se ha asignado una clase de atributo, mientras que el

El elemento ha sido asignado un atributo alt.

CSS

[Alt]
estilo de fuente: cursiva;

Ahora, utilizando el selector [atributo], solo estamos diseñando esos elementos con el atributo alt. En este caso, ya que solo el

El elemento tiene el atributo ALT, por lo tanto, la regla de estilo se aplicará solo en el párrafo.

Producción

Se han diseñado elementos con atributo ALT.

[atributo = "valor"] selector

Los attTibutes tienen algún valor, por lo tanto, para diseñar un elemento que tenga un cierto atributo y valor, usamos el selector [Atribute = "Valor"].

Sintaxis

elemento [attribute = "valor"]
El valor de la propiedad;

O,

[attribute = "valor"]
El valor de la propiedad;

Ejemplo

Supongamos que desea diseñar algunos elementos que tengan un atributo y valor en particular. Sigue el ejemplo a continuación.

Html

Entregar

Aquí hemos creado un campo de entrada, así como un botón. Ambos elementos tienen un atributo de la clase de nombre, sin embargo, los valores de ambos atributos de clase son diferentes.

CSS

[class = "input"]
Color de fondo: rosa;
tamaño de fuente: 20px;

[class = "btn"]
relleno: 3px;
borde: 1px negro sólido;

En el código anterior, estamos utilizando el selector [Atribute = "Valor"] para diseñar tanto el campo de entrada como el botón.

Producción

Ambos elementos han sido estilo con éxito.

[atributo ~ = "valor"] selector

Hay ciertos atributos que tienen una lista de valores separados por espacio, por ejemplo, class = "Hola mundo". Ahora para diseñar elementos con tales valores de atributo, se utiliza el selector [atributo ~ = "valor"]. Estiliza elementos cuyo valor de atributo coincide con uno de estos valores.

Sintaxis

elemento [atributo ~ = "valor"]
El valor de la propiedad;

O,

[atributo ~ = "valor"]
El valor de la propiedad;

Ejemplo

El ejemplo a continuación demuestra el funcionamiento del selector en discusión.

Html

Este es un encabezado

Este es un párrafo.

Este es otro párrafo.

En el código anterior, hemos definido tres elementos. Cada uno de estos elementos tiene el mismo atributo, sin embargo, diferentes valores.

CSS

[class ~ = "Head"]
color morado;

[class ~ = "para"]
tamaño de fuente: 20px;
estilo de fuente: cursiva;

Usando el selector [atributo ~ = "valor"], estamos diseñando el encabezado y los párrafos. Como puede ver que el valor del atributo de cada

El elemento es una lista de valores separados por el espacio, sin embargo, la palabra clave "para" existe en ambos valores, por lo tanto, las reglas de estilo definidas para el valor del atributo "para" se aplicarán a ambos párrafos.

Producción

El selector [atributo ~ = "valor"] funciona correctamente.

[atributo | = "valor"] selector

Con el propósito de diseñar elementos con atributos que tienen valores separados por guión, se utiliza el selector [Atributo | = "Valor"].

Sintaxis

elemento [atributo | = "valor"]
El valor de la propiedad;

O,

[atributo | = "valor"]
El valor de la propiedad;

Ejemplo

Siga el ejemplo mencionado a continuación para comprender el funcionamiento del selector [atributo | = "valor"].

Html

Este es un encabezado

Este es un párrafo.

Este es otro párrafo.

El

y el primero

El elemento tiene un valor de atributo separado por Hyphen, sin embargo, el valor de atributo del último

El elemento no está separado por un guión.

CSS

[class | = "Linux"]
Color de fondo: Bisque;
estilo de fuente: cursiva;

Ahora, este selector solo aplicará reglas de estilo al encabezado y al primer párrafo porque solo estos dos elementos tienen un valor de atributo separado por un guión.

Producción

Las reglas de estilo se han aplicado a

y el primero

elemento.

[atributo^= "valor"] selector

Para peinar elementos con atributos que tienen un valor inicial específico, el selector [atributo^= "valor"]. El valor no es necesariamente la palabra completa.

Sintaxis

elemento [atributo^= "valor"]
El valor de la propiedad;

O,

[atributo^= "valor"]
El valor de la propiedad;

Ejemplo

Vamos a usar el mismo ejemplo utilizado en la sección anterior para borrar el concepto del selector [Atributo^= "Valor"].

Html

Este es un encabezado

Este es un párrafo.

Este es otro párrafo.

Tenga en cuenta que cada uno de los elementos anteriores tiene un valor de atributo que comienza con la palabra Linux.

CSS

[class ^= "Linux"]
Color de fondo: Bisque;
estilo de fuente: cursiva;

Ahora este selector peinará todos los elementos porque cada uno de ellos tiene el mismo valor de atributo inicial.

Producción

El selector [atributo ^= "valor"] funciona correctamente.

[atributo $ = "valor"] selector

Para diseñar elementos con atributos que tienen un valor final particular, el selector [Atributo $ = "valor"]. El valor no es necesariamente la palabra completa.

Sintaxis

elemento [atributo $ = "valor"]
El valor de la propiedad;

O,

[atributo $ = "valor"]
El valor de la propiedad;

Ejemplo

Siga el ejemplo a continuación para comprender el funcionamiento de este selector de atributos.

Html

Algún texto.
Algún texto.
Algún texto.

Aquí hemos creado tres elementos Div. A los dos primeros elementos DIV se les ha asignado un valor de atributo que termina con la palabra clave "div".

CSS

[clase $ = "div"]
Color de fondo: beige;
relleno: 10px;
tamaño de fuente: 20px;
estilo de fuente: cursiva;

El [atributo $ = "valor"] aplicará las reglas de estilo anteriores a los dos primeros elementos Div solamente.

Producción

Los dos primeros elementos DIV se han diseñado utilizando el selector [Atributo $ = "Valor].

[atributo*= "valor"] selector

Con el fin de diseñar todos los elementos con valores de atributo que tienen una palabra clave específica, se utiliza el selector [Atributo *= "Valor"].

Sintaxis

elemento [atributo *= "valor"]
El valor de la propiedad;

O,

[attribute *= "valor"]
El valor de la propiedad;

Ejemplo

Supongamos que desea diseñar algunos elementos utilizando el selector [atributo*= "valor"]. Sigue el código a continuación.

Html

Este es un párrafo.

Este es otro párrafo.

Hemos creado dos

elementos que tienen valores de atributo "para1" y "para2" respectivamente.

CSS

[class *= "ar"]
Color de fondo: Bisque;
estilo de fuente: cursiva;

Este selector de atributos detectará cualquier valor de atributo con la palabra clave "AR" y aplicará las reglas de estilo anteriores en ese elemento.

Producción

El selector [atributo*= "valor"] funciona correctamente.

Conclusión

Puede diseñar elementos HTML que tengan ciertos atributos o valores de atributos. Hay un total de siete selectores de atributos CSS que son: [Atributo] Selector, [Attribute = "Valor"], [Attribute ~ = "Valor"] Selector, [Atribute | = "Valor"] Selector, [Atribute ^= " valor "] selector, [atributo $ =" valor] selector y [attribute *= "valor"] selector. Estos selectores tienen un propósito diferente que hemos discutido en detalle en esta publicación junto con ejemplos relevantes.