El selector [atributo~=”valor”] se utiliza para seleccionar aquellos elementos cuyo valor de atributo contiene una palabra específica. El «valor» debe estar presente en el atributo como una palabra separada y no como parte de la otra palabra, es decir, si se especifica [título~=Geeks], entonces se seleccionan todos los elementos con el título Geeks.
Sintaxis:
[attribute~=value] {
// CSS property
}
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<style>
[class~="Geeks"] {
background: green;
color: white;
}
</style>
</head>
<body style = "text-align:center;">
<div class="Geeks Class">
First div Element
</div>
<div class="GeeksforGeeks">
Second div Element
</div>
<div class="My Geeks">
Third div Element
</div>
<div class="MyGeeks">
Fourth div Element
</div>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>
CSS [attribute~=value] Selector
</title>
<style>
[class~=Geeks] {
border: 5px solid blue;
}
</style>
</head>
<body>
<h2 style = "text-align:center">[attribute~=value] Selector</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
class="Geeks Class" alt="gfg">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"
class="Geeks" alt="geeks">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png"
class="GeeksforGeeks" alt="gfg">
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con el selector [atributo~=valor] se enumeran a continuación:
- Google Chrome 4.0
- Internet Explorer 7.0
- Firefox 2.0
- Safari 3.1
- Ópera 9.6
Publicación traducida automáticamente
Artículo escrito por omprakash_op y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA