CSS Desde 0 – Parte 2 – Selectores


En el articulo anterior habíamos visto como aplicar de forma muy sencilla estilos a los elemento HTML de forma tal que a todos a los que se les aplicaran, ya sea un p, un div o un span, asumirían dichos estilos de igual manera. Este capitulo de la serie propone ir un poco mas allá y comenzar a aplicar estilos a estos elementos de forma independiente, es decir, no poner todos los párrafos en rojo o azul, no poner todas las letra en mayúscula, etc., sino usando el arma mas potente de CSS que son los SELECTORES

Para poder desarrollar páginas web con calidad, es necesario dominar los selectores básicos que nos ofrece CSS. El selector es básicamente un indicativo sobre a quién le vamos a aplicar un estilo determinado. A continuación explicare los cinco selectores básicos.

Selectores Básicos

Selector Universal

El primero y más sencillo (a la hora de declarar), de los cinco selectores y se usa para aplicar a TODOS los elementos HTML estilos comunes; se indica con un asterisco(*), como por ejemplo:

* {
  margin: 0;
  padding: 0;
}

Con esta declaración, hemos eliminado el margen y el relleno de todos los elementos y a partir de nuevas reglas definiríamos nuevos valores para estas propiedades. El código anterior refiere el uso mas popular para este selector y es conocido como Global White Space Reset

Selector de Elementos o Etiquetas

Como hemos visto hasta ahora, el ejemplo anterior del párrafo:

p { text-transform:uppercase; font-weight: bold; color: red; }

es un ejemplo de selector de etiquetas. Estos son estilos que se aplican directamente a estos elementos y que donde quiera que aparezcan en nuestra página tendrán las características que les hayamos declarado. El primer selector que presentamos seleccionaba todos los elementos y les aplicaba una serie de estilos, este a diferencia del primero, permite seleccionar tantos como queramos y aplicarle estilos. Esto se realiza separándolos por una coma (,):

p, div, span, a {
  display: block;
}

Esta declaración significa que el espacio que ocupan estos elementos será tan ancho como lo sea la pantalla (este tipo de propiedades serán explicadas más adelantes, de momento es muy importante no centrarse en ellas, sino en la sintaxis y declaración de los selectores).

Selector descendente

Con él se pueden seleccionar elementos que estén dentro de otros, a cualquier nivel jerárquico. Un elemento es descendente de otro cuando se encuentra dentro de los tags de apertura y cierre de otro, no importa si no es hijo directo.

div span { color: red; }

El ejemplo significa que donde quiera que aparezca un div en nuestra página, que entre su apertura y cierre, contenga uno o varios span, el texto se mostrara rojo:

En este caso tanto el primer span como el segundo que se encuentra dentro del a, tendrán la letra de color rojo.

Selector de Clase

Como hemos visto hasta ahora, cada vez que declaramos un estilo a un elemento de HTML, todos los demás lo asumirán, pero como hacer si queremos que de un conjunto de span o p o cualquier tipo de elemento asuma solamente uno en específico. Ninguno de los selectores visto anteriormente funcionará. Para esta problemática tenemos el selector de clases, el cual se define de la siguiente manera:

.especifico{color: green; }

Con esta declaración cualquier elemento en la página cuyo atributo class sea especifico, tendrá el color de la fuente rojo:

<span class="especifico">Primer Párrafo</span>
Segundo Párrafo 
Tercer Párrafo

Y el resultado sería:

Primer Párrafo
Segundo Párrafo
Tercer Párrafo

El selector de clase se puede repetir en una misma página tantas veces como sea necesario, es decir, puede estar declarado en un p class=”especifico” y después se le puede declarar a un span class=”especifico” y no surge ningún conflicto entre los elementos. También tenemos la posibilidad de crear una regla CSS un poco más avanzada haciendo uso de este selector, por ejemplo, tenemos .especifico{color:red}, una regla que donde quiera que la utilicemos nos mostrara el texto de color rojo, pero si queremos que algunos de los elementos a los que le apliquemos esta regla, tengan la letra en negrita y un tamaño de fuente de 32px, muy sencillo, creamos un regla .resaltar{font-weight:bold; font-size:32px;} y podemos expresarlo de esta manera:


Y obtendremos los resultados requeridos.

Selector de ID

A veces queremos aplicarle un estilo único a un solo elemento en nuestra página y aunque podemos utilizar el selector de clases para esto, existe además el selector de id, el cual nos permite seleccionar un elemento por su atributo id. Solamente se puede identificar únicamente un solo elemento con el id que se defina, no deben existir más de uno con el mismo identificador, y en caso de querer que varios elementos tengan un mismo estilo, pues se utiliza el selector de clases.

#especifico {color:red;}

Es importante recordar, que NO DEBE REPETIRSE EN UNA MISMA PAGINA dos elementos cuyo atributo id sea el mismo.

Combinación de Selectores

Entre las bondades que nos brinda CSS, se encuentra la de combinar selectores para de alguna forma restringir el alcance de las reglas, es decir, si declaramos una regla para que todos los párrafos sean de color rojo, tal vez queremos que algunos de ellos estén en negrita o que la letra sea cursiva, etc. Supongamos que tenemos lo siguiente:

.rojo{color:red;} y .fuente{font-weight:bold;}

La combinación seria


Ahora, la combinación de selectores es un poco delicada, ya que en dependencia de como los combinemos, obtendremos o no un resultado, por ejemplo:

p.rojo { ... }

El código anterior se leería de la siguiente manera: Todos los elementos de tipo “p” con atributo class=”rojo”

p .rojo{ ... }

El código anterior se leería de la siguiente manera: Todos los elementos con atributo class=”rojo” que estén dentro de cualquier elemento de tipo “p”

Y por ultimo

p, .rojo { ... }

Todos los elementos “p” de la página y todos los elementos con atributo class=”rojo” de la página.

Hasta aquí ya hemos visto todos los selectores básicos como se utilizan y como combinarlos, solamente resta que den rienda suelta a la imaginación que los utilicen en dependencia de sus necesidades y que se adentren mas en el mundo de la maquetacion. Próximamente estaremos discutiendo acerca de selectores mas avanzados que nos brinda CSS.