CSS permite seleccionar elementos HTML que tienen atributos específicos o valores de atributos. El elemento se puede seleccionar de varias maneras. A continuación se dan algunos ejemplos:
- [atributo]: Selecciona el elemento con el atributo especificado.
- [attribute=”value”]: Selecciona los elementos con un atributo y valor especificado.
- [atributo~=”valor”]: Selecciona los elementos con un valor de atributo que contiene una palabra específica.
- [atributo|=”valor”]: Selecciona los elementos con el atributo especificado que comienza con el valor especificado.
- [atributo^=”valor”]: Selecciona los elementos en los que el valor del atributo comienza con un valor especificado.
- [atributo$=”valor”]: Selecciona los elementos en los que el valor del atributo termina con un valor especificado.
- [atributo*=”valor”]: Selecciona los elementos en los que el valor del atributo contiene un valor especificado.
Ejemplo 1: este ejemplo cambia el color de fondo del elemento <a> al seleccionar el elemento [objetivo] usando CSS.
<!DOCTYPE html>
<html>
<head>
<title>
Attribute selector in CSS
</title>
<style>
a[target] {
background-color: yellow;
}
a {
font-size: 20px;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<a href="https://www.geeksforgeeks.org" target="_blank">
geeksforgeeks.org
</a>
<br><br>
<a href="https://www.google.com" >
google.com
</a>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo cambia el color de fondo y el color del texto del elemento <a> seleccionando el elemento que tiene [target = “_top”] usando CSS.
<!DOCTYPE html>
<html>
<head>
<title>
Attribute selector in CSS
</title>
<style>
a[target=_top] {
background-color: green;
color: white;
}
a {
font-size: 20px;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<a href="https://www.geeksforgeeks.org" target="_top" >
geeksforgeeks.org
</a>
<br><br>
<a href="https://www.google.com" >
google.com
</a>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo cambia el color de fondo y el color del texto del elemento <p> seleccionando el elemento que tiene [clase^=”superior”] usando CSS.
<!DOCTYPE html>
<html>
<head>
<title>
Attribute selector in CSS
</title>
<style>
[class^="top"] {
background-color: green;
color: white;
}
p {
font-size: 20px;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p class="top-p">A computer science portal</p>
<p class="topPara">Attribute Selector Example</p>
<p class="Para">CSS does not applies here</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA