Selector de comodín CSS
Selectores de comodín
- El [atributo*= "valor"] es un selector de comodín que se utiliza para encontrar elementos cuyo valor de atributo incluye la cadena que hemos dado aquí como valor.
- El [atributo = "valor"] es un selector de comodín que se utiliza para encontrar elementos cuyo valor de atributo comienza con la cadena que hemos dado aquí como valor.
- El [atributo $ = "valor"] El selector es un selector de comodín que se utiliza para encontrar elementos cuyo valor de atributo termina con la cadena que hemos dado aquí como el valor.
Ejemplo 1
Estamos comenzando nuestro código y realizando estos códigos en el código de Visual Studio. Primero, abrimos un nuevo archivo. Luego, elegimos HTML como idioma y luego ponemos "!"Y presione" Enter ". Todas las etiquetas básicas HTML aparecen aquí. Entonces, no necesitamos agregar todas estas etiquetas manualmente. Acabamos de poner la etiqueta de "enlace" en la "cabeza" en la que ponemos el nombre del archivo CSS. Dentro del cuerpo, colocamos un encabezado y algunos contenedores Div, y algunos párrafos. Todos los DIV y párrafos contienen diferentes nombres de clases, por lo que usaremos estos nombres como el valor en el selector de comodín para seleccionar los elementos en CSS. Luego, aplicaremos diferentes estilo a los elementos seleccionados.
Ponemos la sintaxis del selector de comodín [class * = "str"] que seleccionará todos los elementos cuyo nombre de clase contiene "str". Pasamos "STR" como el valor de este selector de comodín. Vamos a aplicar algunas propiedades para que notará fácilmente cómo selecciona los elementos y aplica el estilo a todos ellos. Establecemos "negro" como "fondo" para todos los elementos que contienen "str" en sus nombres de clase.
Estamos configurando el texto "color" en "blanco" porque hemos usado negro para el fondo. También alteramos el tamaño del texto utilizando la propiedad "tamaño de fuente" y estableciéndolo en "18px". También alineamos el texto de los elementos seleccionados con el "centro" utilizando la propiedad "Font-Family" y lo establecemos en la fuente "Arial". El peso de la fuente de los elementos seleccionados se establece en "en negrita". También proporcionamos la salida de códigos en este tutorial. Consulte la salida y verifique cómo selecciona elementos y aplica todas estas propiedades a los elementos seleccionados.
La salida muestra que selecciona todos los elementos cuyos nombres de clase contienen "STR" y las propiedades que hemos utilizado en el código CSS se aplican a los elementos seleccionados.
Ejemplo 2
Nuevamente tenemos múltiples clases de div y múltiples párrafos con diferentes nombres de clase y un encabezado al principio. Aplicaremos el selector de comodines en CSS y seleccionaremos los elementos de este archivo HTML y alteraremos el estilo de esos elementos seleccionados.
Utilizamos la segunda sintaxis del comodín en este ejemplo que es [clase $ = "str"]. Seleccionará todos los elementos cuyos nombres de clase terminan con la cadena "Str". También aplicamos las propiedades de estilo dadas que estamos utilizando en los elementos seleccionados. Decoramos el texto seleccionado utilizando la propiedad "Decorar de texto" y colocamos "subrayado" para esta propiedad. Hemos cambiado el "color" del texto a "granate". También utilizamos la propiedad "del tamaño de la fuente" y colocamos "22px" como su valor para cambiar el tamaño del texto. También usamos el atributo "Font-Family" para establecer la fuente en "Times New Roman" y el "Font-Weight" del elemento seleccionado se ha establecido en "Bold."
Aquí, puede ver todas esas clases cuyos nombres terminan con la cadena "STR" se seleccionan y cambian. Todas las propiedades que hemos descrito en el CSS se aplican aquí en aquellos elementos cuyos nombres de clase terminan en "STR". Todo esto se debe al uso del selector de comodín.
Ejemplo 3
Este archivo HTML es el mismo que el anterior. Simplemente cambiamos los nombres de las clases de div y párrafo. Usaremos la tercera sintaxis del selector de comodín en CSS para este código.
En este ejemplo, vamos a usar la tercera sintaxis del comodín que es [class^= "str"] y seleccionará todos los elementos cuyo nombre de clase comienza con la cadena "str". Para todos los elementos con "STR" al comienzo de los nombres de la clase, establecemos "Pink" como "fondo". Hemos cambiado el "color" del texto a "rojo". Utilizamos la propiedad "Fuente del tamaño" y la especificamos a "22px" para cambiar el tamaño del texto. También utilizamos el atributo "Font-Family" para definir el tipo de fuente a "Calibri" y cambiar el texto de los elementos seleccionados al "Centro". El estilo de fuente de los elementos específicos se ha establecido aquí para "italic".
En esta captura de pantalla, todos esos elementos tienen cuyo nombre de clase comienza con la cadena "str". El selector de comodín selecciona todos esos elementos y les aplica todas las propiedades. También puede ver esto en la salida.
Ejemplo 4
Vamos a cambiar un poco el código HTML anterior. Estamos agregando más contenedores DIV y agregando más párrafos en el archivo HTML anterior y aplicaremos los tres selectores comodines en el código CSS de este ejemplo.
En este código, primero aplicamos algo de estilo al encabezado y alteramos la "familia de fuentes" a "argelino". También colocamos el encabezado en el "centro" utilizando la propiedad "Alinear de texto". La propiedad de "decoración de texto" está aquí que hemos establecido como "subrayado", por lo que dibujará el subrayado para el encabezado. El "color" para esto se establece como "granate".
Luego, usamos el selector de comodín en el que colocamos "*" y "str" como el valor. Entonces, seleccionará todas las clases que contienen "STR" en su nombre de clase. También utilizamos algunas propiedades que se aplicarán a los elementos seleccionados. Después de establecer las propiedades de estilo para este selector de comodín, nos estamos moviendo hacia el próximo selector de comodín que es "[clase^=" par "]", seleccionará todos los elementos en los que los nombres de clases comienzan con la cadena "par" y se aplicarán Estas propiedades dadas en esos elementos.
Ahora, estamos usando el último selector de comodín aquí que escribimos como "[clase $ =" div "]". Entonces, seleccionará aquellos elementos cuyo nombre de clase termina en la cadena "div" y también aplicará las propiedades dadas en todas ellas. Todos estos selectores comodines ignoran los elementos que no cumplen con la condición de estos selectores comodines.
Mire esta salida, aquellos elementos que contienen "STR" en los nombres de la clase tienen el mismo estilo, aquellos elementos cuyo nombre de clase comienza con "par" se diseñan igual, y aquellos elementos cuyo nombre de clase contiene "div" al final de El nombre de la clase es el mismo. Y aquellos elementos que no contienen "STR" en el nombre de la clase y también sus nombres de clase no comienzan con "par" y no terminan en la cadena "div" no se selecciona y parecen simples aquí. No se aplica ninguna propiedad.
Conclusión
El objetivo de escribir este tutorial es guiarlo sobre los selectores CSS Wildcard. Hemos explorado los selectores de los comodines de CSS y le hemos explicado qué son los selectores de comodín, cómo usar estos selectores de comodín y cómo funcionan. Hemos discutido que los selectores de comodín se usan para elegir múltiples elementos al mismo tiempo y utilizados para aplicar propiedades de estilo a aquellos elementos que hemos elegido utilizando estos selectores de comodín. También hemos mostrado ejemplos en los que hemos utilizado esos selectores de comodín y hemos proporcionado los resultados de todos los ejemplos en este tutorial.