En la parte anterior de la serie 101 Hojas de estilo en cascada (CSS), analizamos cómo manejar múltiples reglas para un elemento. Este artículo analiza otra característica importante de CSS: los selectores, que se pueden usar para seleccionar elementos dentro de una página para estilizar una página web.
Tipo de selector
Los estilos CSS tienen muchas formas de implementar la selección de elementos. Los diversos métodos de selección incluyen la selección mediante selector universal, selector de tipo, selector de clase, selector de ID, selector de ancestros, selector de descendientes, selector de hermanos adyacentes y selector de atributos.
Aquí veremos cada uno de estos métodos individualmente (excepto los hermanos y atributos adyacentes, que discutiremos la próxima semana). Nota: La compatibilidad del navegador con selectores CSS es inconsistente, pero puede utilizar las instrucciones en línea para comprobar si un determinado selector funciona en su navegador de destino.
Universal
Los selectores universales le permiten utilizar estilos en toda la página. Básicamente, un estilo no especifica un elemento, clase, etc. específico, por lo que se aplica a todos los elementos de la página. Esto es útil para configurar colores, fuentes, etc.
Los selectores universales se pueden utilizar para todos los elementos de la página, pero pueden ser anulados por selectores específicos. La especificación CSS establece que se puede utilizar un asterisco (*) para representar un selector universal. El Listado A demuestra cómo utilizar selectores universales para configurar el fondo y la fuente predeterminada de la página.
tipo
Una de las formas más comunes de diseñar un elemento es a través de su tipo. Esto significa que un elemento específico tiene su propio estilo definido y este estilo se puede utilizar para todos los elementos de ese tipo independientemente de la posición del elemento en la página. El ejemplo del Listado B demuestra el uso de un selector de tipo para aplicar estilo a todos los elementos del segmento en la página.
Con este tipo de selector, todos los elementos de párrafo dentro de la hoja (a menos que sean anulados por selectores más específicos) tienen márgenes específicos y texto en rojo. Ahora también puedes crear tus propias clases CSS para manejar el estilo de elementos específicos en la página.
amable
Los selectores de clase le brindan más control que los selectores de tipo cuando se trata de decidir qué cubre un estilo. Los estilos definidos por un selector de clase se pueden aplicar a todos los elementos con un atributo de clase, independientemente de la posición del elemento en la página. Proporciona un gran control sobre qué elementos reciben estilos. El ejemplo del Listado C demuestra el uso de una clase para formatear sólo el primer párrafo de una página. Entonces, el primer párrafo tiene una fuente irregular y los siguientes párrafos son diferentes.
Los selectores de clases no pueden utilizar elementos reservados HTML como encabezado, p, h1, etc. También puedes utilizar varias clases para el mismo elemento separándolas con espacios. El Listado D demuestra el uso de múltiples clases para diseñar un párrafo específico.
Puede combinar selectores de clase con selectores de tipo para diseñar ciertos elementos que tienen clases asignadas. En este escenario, al definir estilos, el nombre del elemento tiene un nombre de clase separado por espacios. El ejemplo del Listado E demuestra la técnica mediante la cual sólo los elementos de segmento a los que se les da un nombre de clase específico tienen un estilo de una manera, mientras que los encabezados que tienen el mismo nombre de clase tienen un estilo de otra manera. Entraré en más detalles cuando utilice el atributo ID del elemento.