El selector [atributo=valor] en CSS se utiliza para seleccionar aquellos elementos cuyo valor de atributo es igual a “valor”.
Sintaxis:
element [attribute = "value"] {
// CSS Property
}
Nota: <!DOCTYPE> debe declararse para IE8 y versiones anteriores.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<!-- CSS property used here -->
<style>
h1[id = "geeks"] {
background-color: green;
color:white;
}
li[class = "gfg"] {
color:green;
}
</style>
</head>
<body>
<h1 id = "geeks">GeeksforGeeks</h1>
<ul>
<li class = "gfg">Data Structure</li>
<li class = "geeks">Algorithm</li>
<li class = "gfg">DBMS</li>
<li class = "geeks">C++ programming</li>
</ul>
</body>
</html>
Producción:
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS [attribute=value] Selector
</title>
<!-- CSS property -->
<style>
p[this=Geeks] {
background-color: green;
color:white;
}
</style>
</head>
<body>
<h2>[attribute=value] Selector</h2>
<p this = "Geeks">Paragraph 1</p>
<p this = "geeks">Paragraph 2</p>
<p this="Geeks">Paragraph 2</p>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA