Es posible diseñar elementos HTML que tengan atributos o valores de atributos específicos.
El selector [atributo] se utiliza para seleccionar elementos con un valor específico. atributo.
El siguiente ejemplo selecciona todos los elementos <a> con un atributo de destino:
a[target] {
background-color: yellow;
} Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
El selector [attribute="value"] se utiliza para seleccionar elementos con un valor específico. atributo y valor.
El siguiente ejemplo selecciona todos los elementos <a> con un atributo target="_blank":
a[target="_blank"] {
background-color: yellow;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
a[target="_blank"] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute="value"] Selector</h2>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
El selector [attribute~="value"] se utiliza para seleccionar elementos con un atributo valor que contiene una palabra especificada.
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":
[title~="flower"] {
border: 5px solid yellow;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
[title~="flower"] {
border: 5px solid yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute~="value"] Selector</h2>
<p>All images with the title attribute containing the word "flower" get a yellow border.</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">
</body>
</html>
El ejemplo anterior coincidirá con elementos con título="flor", título="verano flor", y título="flor nueva", pero no título="mi-flor" o título="flores".
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 (-).
Nota: El valor tiene que ser una palabra completa, ya sea sola, como class="top", o seguido de un guión ( - ), como class="top-text".
[class|="top"] {
background: yellow;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
[class|="top"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute|="value"] Selector</h2>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>
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 "arriba":
Nota: ¡El valor no tiene que ser una palabra completa!
[class^="top"] {
background: yellow;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute^="value"] Selector</h2>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>
El selector [attribute$="value"] se utiliza para seleccionar elementos cuyo atributo El valor termina con un valor especificado.
El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que termina con "prueba":
Nota: ¡El valor no tiene que ser una palabra completa!
[class$="test"] {
background: yellow;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute$="value"] Selector</h2>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
El selector [attribute*="value"] se utiliza para seleccionar elementos cuyo atributo value contiene un valor especificado.
El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que contiene "te":
Nota: ¡El valor no tiene que ser una palabra completa!
[class*="te"] {
background: yellow;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute*="value"] Selector</h2>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
Los selectores de atributos pueden ser útiles para diseñar formularios sin clase o ID:
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}Pruébelo usted mismo →
<!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>
Consejo: Visite nuestro tutorial de formularios CSS para obtener más ejemplos sobre cómo diseñar formularios con CSS.
Ejemplo
[target]
Descripción de ejemplo
Selecciona todos los elementos con un atributo de destino.
Ejemplo
[target="_blank"]
Descripción de ejemplo
Selecciona todos los elementos con target="_blank"
Ejemplo
[title~="flower"]
Descripción de 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".
Ejemplo
[lang|="en"]
Descripción de ejemplo
Selecciona todos los elementos con un valor de atributo lang que comienza con "en"
Ejemplo
a[href^="https"]
Descripción de ejemplo
Selecciona todos los elementos <a> con un valor de atributo href que comienza con "https"
Ejemplo
a[href$=".pdf"]
Descripción de ejemplo
Selecciona todos los elementos <a> con un valor de atributo href que termina en ".pdf"
Ejemplo
a[href*="w3schools"]
Descripción de ejemplo
Selecciona todos los elementos <a> con un valor de atributo href que contiene la subcadena "w3schools"