Selectores de atributos CSS
- [Atributo] Selector
- [atributo = "valor"] selector
- [atributo ~ = "valor"] selector
- [atributo | = "valor"] selector
- [atributo^= "valor"] selector
- [atributo $ = "valor"] selector
- [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
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.