É possível estilizar elementos HTML que possuem atributos ou valores de atributos específicos.
O seletor [attribute] é usado para selecionar elementos com um valor especificado atributo.
O exemplo a seguir seleciona todos os elementos <a> com um atributo de destino:
a[target] {
background-color: yellow;
} Experimente você mesmo →
<!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>
O seletor [attribute="value"] é usado para selecionar elementos com um valor especificado atributo e valor.
O exemplo a seguir seleciona todos os elementos <a> com um atributo target="_blank":
a[target="_blank"] {
background-color: yellow;
}Experimente você mesmo →
<!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>
O seletor [attribute~="value"] é usado para selecionar elementos com um atributo valor contendo uma palavra especificada.
O exemplo a seguir seleciona todos os elementos com um atributo title que contém uma lista de palavras separadas por espaços, uma das quais é "flor":
[title~="flower"] {
border: 5px solid yellow;
}Experimente você mesmo →
<!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>
O exemplo acima irá combinar elementos com title="flower", title="summer flor" e title="flor nova", mas não title="minha-flor" ou title="flores".
O seletor [attribute|="value"] é usado para selecionar elementos com o atributo especificado, cujo valor pode ser exatamente o valor especificado ou o valor especificado seguido por um hífen (-).
Nota: O valor deve ser uma palavra inteira, isoladamente, como class="top", ou seguido por um hífen( - ), como class="top-text".
[class|="top"] {
background: yellow;
}Experimente você mesmo →
<!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>
O seletor [attribute^="value"] é usado para selecionar elementos com o atributo especificado, cujo valor começa com o valor especificado.
O exemplo a seguir seleciona todos os elementos com um valor de atributo de classe que começa com "topo":
Nota: O valor não precisa ser uma palavra inteira!
[class^="top"] {
background: yellow;
}Experimente você mesmo →
<!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>
O seletor [attribute$="value"] é usado para selecionar elementos cujo atributo o valor termina com um valor especificado.
O exemplo a seguir seleciona todos os elementos com um valor de atributo de classe que termina com "teste":
Nota: O valor não precisa ser uma palavra inteira!
[class$="test"] {
background: yellow;
}Experimente você mesmo →
<!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>
O seletor [attribute*="value"] é usado para selecionar elementos cujo atributo value contém um valor especificado.
O exemplo a seguir seleciona todos os elementos com um valor de atributo de classe que contém "te":
Nota: O valor não precisa ser uma palavra inteira!
[class*="te"] {
background: yellow;
}Experimente você mesmo →
<!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>
Os seletores de atributos podem ser úteis para estilizar formulários sem classe ou ID:
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}Experimente você mesmo →
<!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>
Dica: visite nosso Tutorial de formulários CSS para obter mais exemplos de como estilizar formulários com CSS.
Exemplo
[target]
Exemplo de descrição
Seleciona todos os elementos com um atributo de destino
Exemplo
[target="_blank"]
Exemplo de descrição
Seleciona todos os elementos com target="_blank"
Exemplo
[title~="flower"]
Exemplo de descrição
Seleciona todos os elementos com um atributo title que contém uma lista de palavras separadas por espaços, uma das quais é "flor"
Exemplo
[lang|="en"]
Exemplo de descrição
Seleciona todos os elementos com um valor de atributo lang começando com "en"
Exemplo
a[href^="https"]
Exemplo de descrição
Seleciona todos os elementos <a> com um valor de atributo href começando com "https"
Exemplo
a[href$=".pdf"]
Exemplo de descrição
Seleciona todos os elementos <a> com um valor de atributo href terminando com ".pdf"
Exemplo
a[href*="w3schools"]
Exemplo de descrição
Seleciona todos os elementos <a> com um valor de atributo href contendo a substring "w3schools"