El selector [atributo|=valor] se utiliza para seleccionar aquellos elementos cuyo valor de atributo es igual a «valor» o valor de atributo que comienza con «valor» con el inmediato seguido de un guión (-).
Nota: Utilice <!DOCTYPE> para ejecutar el selector [atributo|=valor] en IE8 o versiones anteriores.
Sintaxis:
[attributeType|=value] {
// CSS Property
}
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>
CSS|[attribute|=value] Selector
</title>
<!-- CSS property -->
<style>
[class|=Geeks] {
background-color:green;
border: 5px solid green;
}
</style>
</head>
<body style = "text-align: center;">
<!-- CSS property apply here -->
<h1 class = "Geeks">
GeeksforGeeks
</h1>
<h3 class = "GeeksforGeeks">
A computer science portal
</h3>
<!-- CSS property apply here -->
<h2 class = "Geeks-portal">
CSS [attribute|=value] Selector
</h2>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>
CSS|[attribute|=value] Selector
</title>
<!-- CSS property -->
<style>
[id|=Geeks] {
background-color:green;
border: 5px solid green;
}
</style>
</head>
<body style = "text-align: center;">
<!-- CSS property apply here -->
<h1 id = "Geeks">
GeeksforGeeks
</h1>
<h3 id = "GeeksClasses">
A computer science portal
</h3>
<!-- CSS property apply here -->
<h2 id = "Geeks-portal">
CSS [attribute|=value] Selector
</h2>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con el selector [atributo|=valor] se enumeran a continuación:
- Google Chrome 4.0
- Explorar Internet 7.0
- Firefox 2.0
- Apple Safari 3.1
- Ópera 9.6