Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 58
2.2.6.4 Referencias con cualquier atributo
ОглавлениеAunque estos métodos de referencia cubren una variedad de situaciones, a veces no son suficientes para encontrar el elemento exacto al que se desea aplicar un estilo. Las últimas versiones de CSS han incorporado nuevas formas de hacer referencia a los elementos HTML. Uno de ellos es el Selector de atributos. Ahora, podemos hacer referencia a un elemento no solo por sus atributos id y class, sino también por cualquier otro atributo.
Código 2-15
Referenciar elementos <p> que tienen un atributo name.
La regla del Código 2-15 solo cambia los elementos <p> que tienen un atributo llamado name. Para reflejar lo que antes hicimos con los atributos id y class, podemos también proporcionar el valor del atributo.
Código 2-16
Referenciar elementos <p> que tienen un atributo name con el valor mitexto.
CSS3 nos permite combinar el símbolo = con otros para hacer una selección más detallada:
Código 2-17
Nuevos selectores en CSS3.
Si ya conoce las expresiones regulares de otras lenguajes como Javascript o PHP, reconocerá los selectores utilizados en el Código 2-17. En CSS3 estos selectores producen resultados similares:
La regla con el selector ^= se asignará a cualquier elemento <p> con un valor de atributo name que comience con “mi” (por ejemplo, mitexto, michoche).
La regla con el selector $= se asignará a cualquier elemento <p> con un valor de atributo de name que termine en “mi” (por ejemplo, textomi, cochemi).
La regla con el selector *= coincidirá con cualquier elemento <p> con un valor del atributo name que contenga la cadena de texto “mi” (en este caso, la cadena de texto también podría estar en el medio, por ejemplo, en textomicoche)
En estos ejemplos, se utiliza el elemento <p>, el atributo name y un texto (“mi”), pero la misma técnica puede ser utilizada con cualquier atributo y el valor que necesite. Para hacer referencia a cualquier elemento HTML, solo tiene que escribir entre corchetes el nombre del atributo y el valor que está buscando.
