El selector [atributo$=”valor”] se utiliza para seleccionar aquellos elementos cuyo valor de atributo termina con un valor específico “valor”. El valor no necesita estar presente como una palabra separada. Puede ser parte de otra palabra o expresión, pero debe estar presente al final.
Sintaxis:
[attribute$="value"] {
// CSS property
}
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<style>
[class$="str"] {
background: green;
color: white;
}
h1 {
color:green;
}
body {
text-align:center;
width:60%;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<!-- All items ending with str are highlighted -->
<div class="firststr">The first div element.</div>
<div class="stsecondstr">The second div element.</div>
<div class="start">The third div element.</div>
<p class="mystr">This is some text in a paragraph.</p>
</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 for Geeks" alt="gfg">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"
class="Geeks-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 3.5
- Safari 3.2
- Ó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