El selector de atributos CSS se utiliza para seleccionar un elemento con algún atributo o valor de atributo específico. Es una excelente manera de diseñar los elementos HTML agrupándolos en función de algunos atributos específicos y el selector de atributos seleccionará aquellos elementos con atributos similares.
Hay varios tipos de selectores de atributos que se analizan a continuación:
- Selector [atributo]: este tipo de selector de atributo se utiliza para seleccionar todos los elementos que tienen el atributo especificado y aplica la propiedad CSS a ese atributo. Por ejemplo, el selector [clase] seleccionará todos los elementos con el atributo de estilo.
Ejemplo:
<!DOCTYPE html><html><head><title>Attributes selector</title><style>[class] {text-align:center;Color:green;}.gfg {font-size:40px;font-weight:bold;margin-bottom:-20px;}</style></head><body><divclass="gfg">GeeksforGeeks</div><pclass="geeks">A computer science portal for geeks</p></body></html>Producción:
Este selector se usa para restringir algunos elementos particulares, luego necesita especificar ese elemento antes que el selector de atributos.
Ejemplo:<!DOCTYPE html><html><head><title>Attribute selector</title><style>div[style] {text-align:center;color:green;font-size:40px;font-weight:bold;margin-bottom:-20px;}p {text-align:center;font-size:17px;}</style></head><body><divstyle="color:green">GeeksforGeeks</div><p>A computer science portal for geeks</p></body></html>Producción:
Se pueden seleccionar varios elementos usando el operador de coma
h2, p[style] { background-color: #00b93e; } - [atributo = “valor”] Selector: Este selector se utiliza para seleccionar todos los elementos cuyo atributo tiene el valor exactamente igual al valor especificado.
Ejemplo:
<!DOCTYPE html><html><head><title>Attribute selector</title><style>[title = "gfg"] {color:green;font-size:40px;font-weight:bold;text-align:center;}[title = "geeks"] {font-size:17px;text-align:center;margin-top:0px;}</style></head><body><divtitle="gfg">GeeksforGeeks</div><ptitle="geeks">A computer science portal for geeks</p></body></html>Producción:
- Selector [atributo~=”valor”]: Este selector se utiliza para seleccionar todos los elementos cuyo valor de atributo es una lista de valores separados por espacios, uno de los cuales es exactamente igual al valor especificado.
Ejemplo:
<!DOCTYPE html><html><head><title>Attribute selector</title><style>[class~="gfg"] {color:green;font-size:40px;font-weight:bold;text-align:center;}[class~="geeks"] {font-size:17px;text-align:center;margin-top:0px;}</style></head><body><divclass="gfg">GeeksforGeeks</div><divClass="geeks">A computer science portal for geeks</div><divclass="geeks ide">GeeksforGeeks is coding platform</div></body></html>Producción:
- Selector [atributo|=”valor”]: Este selector se utiliza para seleccionar todos los elementos cuyo atributo tiene una lista de valores separados por guiones que comienzan con el valor especificado. El valor tiene que ser una palabra completa sola o seguida de un guión.
Ejemplo:
<!DOCTYPE html><html><head><title>Attribute selector</title><style>[class|="gfg"] {color:green;font-size:40px;font-weight:bold;text-align:center;}[class|="geeks"] {font-size:17px;text-align:center;margin-top:0px;}</style></head><body><divclass="gfg">GeeksforGeeks</div><divClass="geeks-ide">A computer science portal for geeks</div><divclass="geeks-ide1">GeeksforGeeks is coding platform</div></body></html>Producción:
- Selector [attribute^=”value”]: Este selector se utiliza para seleccionar todos los elementos cuyo valor de atributo comienza con el valor especificado. El valor no necesita ser una palabra completa.
Ejemplo:
<!DOCTYPE html><html><head><title>Attribute selector</title><style>[class^="gfg"] {color:green;font-size:40px;font-weight:bold;text-align:center;}[class^="geeks"] {font-size:17px;text-align:center;margin-top:0px;}</style></head><body><divclass="gfg">GeeksforGeeks</div><divClass="geeks">A computer science portal for geeks</div><divclass="geekside">GeeksforGeeks is coding platform</div></body></html>Producción:
- Selector [attribute$=”value”]: Este selector se utiliza para seleccionar todos los elementos cuyo valor de atributo termina con el valor especificado. El valor no necesita ser una palabra completa.
Ejemplo:
<!DOCTYPE html><html><head><title>Attribute selector</title><style>[class$="gfg"] {color:green;font-size:40px;font-weight:bold;text-align:center;}[class$="geeks"] {font-size:17px;text-align:center;margin-top:0px;}</style></head><body><divclass="gfg">GeeksforGeeks</div><divClass="geeksforgeeks">A computer science portal for geeks</div><divclass="geeks">GeeksforGeeks is coding platform</div></body></html>Producción:
- Selector [atributo*=”valor”]: Este selector selecciona todos los elementos cuyo valor de atributo contiene el valor especificado presente en cualquier lugar. El valor no necesita ser una palabra completa.
Ejemplo:
<!DOCTYPE html><html><head><title>Attribute selector</title><style>[class*="gfg"] {color:green;font-size:40px;font-weight:bold;text-align:center;}[class*="for"] {font-size:17px;text-align:center;margin-top:0px;}</style></head><body><divclass="gfg">GeeksforGeeks</div><divClass="geeksforgeeks">A computer science portal for geeks</div><divclass="geeks for">GeeksforGeeks is coding platform</div></body></html>Producción: