Es posible diseñar elementos HTML que tengan atributos o valores de atributos específicos.
El selector CSS [atributo]
Es usado para seleccionar elementos con un atributo específico.
Ejm
a[target] {
background-color: yellow;
}
El selecto CSS [atributo=»valor»]
El selector [atributo=»valor»] se utiliza para seleccionar elementos con un atributo y valor especificados.
Ejm
a[target="_blank"] {
background-color: yellow;
}
CSS [atributo~=»valor»] Selector
El selector [atributo~=»valor»] se utiliza para seleccionar elementos con un valor de atributo que contiene una palabra específica.
El siguiente ejemplo selecciona todos los elementos con un atributo de título que contiene una lista de palabras separadas por espacios, una de las cuales es «flor».
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
[title~=flor] {
border: 5px solid yellow;
}
</style>
</head>
<body>
<h2>CSS [atributo~="valor"] Selector</h2>
<p>Todas las imágenes con el atributo de título que contiene la palabra "flor" tienen un borde amarillo.</p>
<img src="klematis.jpg" title="klematis flor" width="150" height="113">
<img src="img_flwr.gif" title="flor" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">
</body>
</html>
El ejemplo anterior hará coincidir los elementos con title=»flor», title=»summer flor» y title=»flor new», pero no title=»my-flor» o title=»flores».
CSS [atributo|=»valor»] Selector
El selector [atributo|=»valor»] se utiliza para seleccionar elementos con el atributo especificado, cuyo valor puede ser exactamente el valor especificado, o el valor especificado seguido de un guión (-). El valor debe ser una palabra completa, ya sea sola, como class=»top», o seguida de un guión (-), como class=»top-text».
Ejm
[class|="top"] {
background: yellow;
}
CSS [atributo^=»valor»] Selector
El selector [atributo^=»valor»] se utiliza para seleccionar elementos con el atributo especificado, cuyo valor comienza con el valor especificado. El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que comienza con «top».
Ejm
[class^="top"] {
background: yellow;
}
CSS [atributo$=»valor»] Selector
El selector [atributo$=»valor»] se usa para seleccionar elementos cuyo valor de atributo termina con un valor específico. El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que termina con «test».
Ejm
[class$="test"] {
background: yellow;
}
CSS [atributo*=»valor»] Selector
El selector [atributo*=»valor»] se utiliza para seleccionar elementos cuyo valor de atributo contiene un valor específico. El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que contiene «te».
Ejm
[class*="te"] {
background: yellow;
}
Dando estilo a los formularios
Los selectores de atributos pueden ser útiles para diseñar formularios sin clase o ID.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type=button] {
width: 120px;
margin-left: 35px;
display: block;
}
</style>
</head>
<body>
<h2>Styling Forms</h2>
<form name="input" action="" method="get">
Firstname:<input type="text" name="Name" value="Peter" size="20">
Lastname:<input type="text" name="Name" value="Griffin" size="20">
<input type="button" value="Example Button">
</form>
</body>
</html>