Selector de clases en CSS
CSS proporciona múltiples formas de modificar la apariencia de un elemento. Los selectores CSS son uno de ellos, los selectores nos permiten dirigir un elemento HTML y especificar un estilo de nuestra elección en cualquier elemento HTML.
En CSS hay cinco categorías de selectores I.mi. Simple, combinador, pseudo-clase, pseudoelemento y selector de atributos. Este artículo presenta una descripción detallada de uno de los selectores simples I.mi. Selector de clases y discutirá las siguientes terminologías relacionadas con el selector de clases:
- ¿Qué es un selector de clase?
- Sintaxis básica del selector de clases
- Cómo usar el selector de clases
- Cómo usar el selector de clases para algunos elementos HTML específicos
Comencemos esta discusión con la definición básica del selector de clases:
Selector de clases en CSS
Un selector de clases se dirige a los elementos con nombre (s) de clase específicos (s). La siguiente sintaxis le proporcionará más claridad sobre el selector de clases.
Sintaxis
La sintaxis básica comienza con un punto "."Seguido por el nombre de clase que representa que es un selector de clase.
En la figura anterior "."Muestra que es un selector de clase CSS," estilo "representa el nombre de la clase.
Cómo usar el selector de clases CSS
El selector de clases CSS se puede usar para establecer el estilo de algunos elementos HTML específicos.
Ejemplo
Echemos un vistazo al código dado a continuación, utiliza el selector de clases para diseñar algunos elementos HTML específicos.
Selector de clases CSS
Primer párrafo
Segundo parrafo
El código anterior utiliza dos selectores de clase. El
y primero
El elemento usa la misma clase, por lo que se implementará el mismo estilo, mientras que el segundo
El elemento se establecerá de manera diferente:
Cómo usar el selector de clase CSS para elementos HTML específicos
Podemos usar el selector de clase CSS para afectar elementos HTML específicos. Para este propósito tenemos que especificar el nombre del elemento antes del punto ".", Como se muestra en la siguiente figura:
La figura anterior describe que selecciona todo el
elementos que tienen el nombre de clase "estilo" y establecen el color de fondo como azul.
Ejemplo
En este ejemplo, la clase Style1 se especifica a
y
elementos. Sin embargo, solo
elementos que tienen el atributo de clase "style1" pueden acceder a las propiedades de estilo del estilo1 y el
El elemento permanecerá sin estrecho.
Selector de clases CSS
Primer párrafo
Segundo parrafo
Producción
Cómo implementar múltiples estilos en el elemento HTML
Como elemento HTML puede tener múltiples nombres de clase en su atributo de clase para que podamos aplicar diferentes estilo basado en los nombres de la clase.
Ejemplo
En el siguiente código, el primer párrafo implementará las propiedades de ambas clases de estilo.
Selector de clases CSS
Primer párrafo
Segundo parrafo
La pieza de código anterior generará la siguiente salida:
La salida verifica que el primer párrafo utiliza las propiedades de ambas clases 'estilo' y 'style1'.
Conclusión
Un selector de clase selecciona el elemento HTML para el estilo en CSS usando su nombre de clase y comienza con un punto "."Seguido del nombre de la clase. Este artículo presenta una visión general integral y un concepto central de selectores de clase CSS, cómo usar selectores de clase, cómo usar un selector de clase para algunos elementos HTML específicos con la ayuda de ejemplos.