Uso de selectores básicos en CSS

CSS no tendría un gran potencial si no fuese porque cuenta con selectores,  que son una forma de estilizar un comportamiento, como cuando el mouse pasa sobre un elemento. Este tipo de comportamientos son útiles y nos ayudan a no tener que usar javascript puesto que con estos selectores podemos filtar, seleccionar, y alterar los estilos de acuerdo a un determinado comportamiento.

A continuación vamos a conocer el uso de selectores básicos en CSS, para que de alguna forma nos quede mucho más claro cómo funcionan, pero más importante, cómo es que nos hacen la vida mucho más fácil al momento de hacer sitios web dinámicos.

Entonces, en este post conoceremos 10 selectores básicos en CSS, con lo que tendremos ya mucha imaginación para jugar con ellos.

*

Este selector lo usamos cuando queremos que todos los elementos tengan un estilo definido. Por ejemplo, si quisieramos que todos los elementos que tengan texto o no tuvieran el mismo tipo de fuente usaríamos * para definir la fuente, y de esa forma todos los textos que tengamos en nuestro sitio tendrán la misma fuente.

Elemento

Este es el más usado, y por Elemento me refiero a cualquier etiqueta HTML (span, div, img, etc). Si quisiéramos definir un estilo para todas las imágenes definiríamos un estilo img{} para que afecte a las imágenes, un p{} para los párrafos, y así con cada etiqueta que quisiéramos.

.clase

También podemos usar el “.” para definir un estilo y que éste aplique a todas las etiquetas HTML que tengan la propiedad ‘class=”nombreClase”’. También se puede usar “#” para definir un id específico para un único elemento que tenga en su propiedad el mismo nombre en el id.

ElementoA ElementoB

Este selector sirve para que los estilos se apliquen a todas las etiquetas Elemento A que dentro de ellas tengan una etiqueta ElementoB. Por ejemplo, si quisieramos que todas las capas que dentro tienen párrafos tengan un espacio interior (padding) definiríamos la regla como div p{} porque puede que haya elementos <p> que no están dentro de una capa y por ende no queremos que tengan cierto estilo.

Esta propiedad sirve para todos los elementos que puedan contener otros elementos, como capas, tablas, párrafos, links, etc. Las imágenes no podrían usarse como ElementoA puesto que no pueden contener nada.

ElementoA .clase

Y como podemos definir que se aplique un estilo a todos los ElementoB que estén dentro de ElementoA, también podemos decirle que busque por todas las clases (“.clase”) o id’s (“#nombre”) para seleccionar sólo aquellas que cumplan con las dos condiciones.

ElementoA, ElementoB, ElementoC

En vez de definir dos veces los mismos estilos para dos etiquetas diferentes podemos agruparlas usando un espacio entre cada nombre de la etiqueta, de esa forma ahorramos espacio y no tenemos que modificar estilos dos veces. Por ejemplo, si quisiéramos que los H1, H2, y H3 tuvieran el mismo color de texto lo lógico sería hacer un estilo para H1{}, luego para H2{}, y para H3{}, pero para hacernos la vida más fácil podemos definir un sólo estilo que afecte a las tres etiquetas quedando como H1, H2, H3{}

ElementoA > ElementoB

Este selector es un poco más difícil de entender. En HTML existe una jerarquía de maquetación, lo que hace que haya padres e hijos (no literalmente). Un padre es aquel que contiene otros elementos, y un hijo es un elemento que está contenido. Sin embargo si un hijo también es padre el padre sería el abuelo, pero eso ya no existe, sólo existe un nivel, y para eso nos sirve el símbolo “>”

A diferencia de ElementoA ElementoB con ElementoA > ElementoB la jerarquía se toma en cuenta, como en la imagen, si retomamos que queremos sólo a los <p> que sean hijos de <div>, o div > p, entonces el tercer <p> no se cuenta porque es hijo de <span>, no de <div>; con ElementoA ElementoB se seleccionaría el <p> hijo de <span> porque el selector quiere a todos los <p> sin importar jerarquía.

ElementoA : first-child

Si sólo quisieramos que el estilo se aplique al primer elemento hijo de ElementoA usaríamos el selector :first-child. En la imagen vemos que si ElementoA fuera un div su primer hijo sería el primer <img/> según el orden en que escribamos las etiquetas.

ElementoA:hover

Este selector se activa cuando el mouse pasa sobre ElementoA. También puede usarse si usamos .clases, o #ids, no importa el elemento, :hover actua sobre todos. :hover no es el único, también está :visited, :active y :link, que son usamos más que nada cuando usamos enlaces para denotar que ya ha sido visitado, que el link es el último que se uso, y todos los enlaces que no han sido visitados, respectivamente.

ElementoA:before

Con :before declaramos que nuestro ElementoA tendrá un contenido antes del contenido de ElementoA, por lo general usando la propiedad content: y si agregamos más propiedades a nuestra regla todo afectara al espacio entre el inicio de nuestra etiqueta hasta el inicio del contenido de la misma.

ElementoA:after

De la misma forma que :before si quisieramos definir algo después de nuestro contenido ahora usaríamos :after para eso.

¿Ya conocías estos selectores?