GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Estilo de elementos HTML con atributos

específicos
Es posible dar estilo a los elementos HTML que tienen atributos específicos o valores de atributos.

Selector de [atributo]
El selector [attribute] se utiliza para seleccionar los elementos con un atributo específico. El
ejemplo siguiente selecciona todos los elementos <a> con un atributo de destino:

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

Ver: Código 200.html

Selector de [atributo = "valor"]

El selector [attribute="value"] se utiliza para seleccionar elementos con un atributo y valor
específico. El ejemplo siguiente selecciona todos los elementos <a> con atributo de destino a = "_
blank":

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

Ver: Código 201.html

Selector de [atributo ~ = "valor"]

El selector [attribute~="value"] se utiliza para seleccionar elementos con un valor de atributo que
contiene una palabra específica. El ejemplo siguiente selecciona todos los elementos con un
atributo de título que contiene una lista separada por espacios de palabras, uno de los cuales es
"flor":
[title~="flor"] {
border: 5px solid yellow;
}

Ver: Código 202.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

El ejemplo anterior coincidirá con elementos title = "flor", title = "Flor de Nacional", y el título =
"Arbol Floreado", pero no title = "Arboleda" o title = "Arboles".

Selector [atributo | = "valor"]

El selector [attribute|="value"] se utiliza para seleccionar elementos con el atributo especificado
empezando por el valor específico. El ejemplo siguiente selecciona todos los elementos con un
valor de atributo de clase que comienza con "top":
Nota: El valor tiene que ser una palabra completa, ya sea solo como class = "top", o seguido de un
guión (-), como class = "top-texto"!

[class|="top"] {
background: yellow;
}

Ver: Código 203.html

Selector [^ atributo = "valor"]

El selector [attribute^="value"] se utiliza para seleccionar elementos cuyo valor de atributo
comienza con un valor específico. El ejemplo siguiente selecciona todos los elementos con un
valor de atributo de clase que comienza con "top":
Nota: El valor no tiene por qué ser una palabra completa!

[class^="top"] {
background: yellow;
}

Ver: Código 204.html

Selector [atributo $ = "valor"]

El selector [attribute$="value"] se utiliza para seleccionar elementos cuyo valor de atributo
termina con un valor específico. El ejemplo siguiente selecciona todos los elementos con un valor
de atributo de clase que termina con "prueba":
Nota: El valor no tiene por qué ser una palabra completa.

[class$="prueba"] {
background: yellow;
}
Ver: Código 205.html
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Selector [* atributo = "valor"]

El selector [attribute*="value"] se utiliza para seleccionar elementos cuyo valor de atributo
contiene un valor específico. El ejemplo siguiente selecciona todos los elementos con un valor de
atributo de clase que contiene "te":
Nota: El valor no tiene por qué ser una palabra completa.

[class*="te"] {
background: yellow;
}

Ver: Código 206.html