Selectores CSS
¿Te estás preguntando cómo funcionan los selectores de CSS?? No hay problema! Este artículo demostrará una comprensión detallada de los selectores CSS con ejemplos. Comencemos con la sintaxis primero:
Sintaxis
La sintaxis para escribir un selector de CSS se muestra en el fragmento dado a continuación:
Aquí "P" es el selector que convertirá el color del párrafo en verde.
Tipos de selectores CSS
CSS ofrece varios tipos de selectores que cada tipo posee una funcionalidad diferente. Este artículo cubrirá los siguientes tipos:
- selector de elementos
- selector de clases
- Selector de identificación
- selector de agrupación
- selector universal
Selector de elementos
En CSS, el selector de elementos se usa para apuntar a los elementos HTML de acuerdo con su nombre.
Por ejemplo, el siguiente código implementará el color de fondo negro con color de texto verde a todos los párrafos utilizando el selector de elementos:
Selectores
Desarrollo frontend
Desarrollo de back -end
La salida dada a continuación demostrará el funcionamiento del selector de elementos CSS:
Selector de clases
El selector de clase CSS se utiliza para apuntar a los elementos HTML con un nombre de clase específico. La sintaxis del selector de clases incluye un período (.) seguido del nombre de la clase.
.ClassName CSS-Property: ValueEn la sintaxis anterior, "classname" es un selector de clases.
Consideremos un ejemplo que se dirigirá al encabezado y los elementos del párrafo utilizando el selector de clases como se muestra en el siguiente código:
Selectores
Desarrollo frontend
Desarrollo de back -end
En este ejemplo ".estilo "es selector de clases que especifica algunas propiedades. En la sección del cuerpo
, y ambos
los elementos tienen el nombre de clase "estilo".
El fragmento a continuación mostrará la salida del fragmento de código anterior:
Selector de identificación
En CSS, el Selector de identificación Se dirige a los elementos HTML basados en el atributo de identificación. El signo hash (#) seguido de la identificación del elemento se usa para el Selector de identificación.
Consideremos un ejemplo que implementará el estilo especificado en el elemento HTML con id = "estilo" como se muestra a continuación:
Selectores
Desarrollo frontend
Desarrollo de back -end
El selector de identificación implementado en el
El elemento proporcionará la siguiente salida:
Ahora, debe estar pensando cuál es la diferencia entre el selector de identificación y el selector de clases?
ID es un identificador único, lo que significa que una vez que usamos el ID para un elemento, el mismo ID no se puede usar en otro lugar dentro del mismo documento. Si usamos la misma identificación dos veces en un documento, el CSS aplicará el estilo al último. Si bien las clases son excelentes clasificadores, no son únicos en la naturaleza.
Selector de agrupación
El selector de agrupación objetivo múltiples elementos con el mismo estilo. El selector de agrupación utilizado ',' entre varios selectores.
Consideremos un ejemplo que implementará el mismo estilo a los elementos múltiples como se muestra en el siguiente fragmento:
Selectores
Desarrollo frontend
Desarrollo de back -end
Este es un pie de página
La siguiente salida verificará que el selector de agrupación aplicara el mismo estilo a
y elementos:
Selector universal
El selector universal implementa el estilo de todos los elementos del documento. Se utiliza un signo "*" para implementar el selector universal. Por ejemplo, el siguiente código aplicará el estilo dado en todos los elementos HTML:
Selectores
Desarrollo frontend
Desarrollo de back -end
Este es un pie de página
El código anterior implementará el documento completo y, como resultado, obtendremos la siguiente salida:
Conclusión
Selectores CSS Buscar/Dirigir a los elementos HTML e implementar algunas propiedades de estilo en ellos. Existen numerosos tipos de selectores CSS, este artículo cubrió algunos de ellos, como el selector de elementos y el selector de clases en función del nombre del elemento y el nombre de clase del elemento, respectivamente. Cada tipo realiza diferentes funcionalidades como el selector de identificación implementa alguna acción basada en la identificación de elementos, el selector de agrupación se dirige a los elementos múltiples, el selector universal afecta todo el documento, etc.