Desarrollo de Software

Selectores básicos de CSS

Los selectores de CSS nos permiten elegir al elemento o elementos a los que queremos aplicar unas ciertas reglas de presentación. De este modo, podemos dar estilo a todos los elementos HTML que queramos de nuestras páginas. Hay 5 selectores básicos de CSS.

Selectores básicos de CSS

Selector universal

El selector universal viene representado con un asterisco (*):

* {
    color: red;
}

Selecciona todos los elementos de la página, algo útil cuando queremos aplicar el mismo estilo a todos ellos, aunque es complicado que se requiera tener el mismo estilo en todos los elementos. Puede ser aplicado también para seleccionar los elementos hijos:

p * {
    color: red;
}

El selector universal debería evitarse todo lo posible y no utilizarse, porque añade mucha carga en el procesamiento de los navegadores.

Selector de elemento, etiqueta o tipo

El selector de elemento selecciona aquellos elementos cuya etiqueta HTML coincide con el del selector:

h1 {
    color: red;
}

Útil cuando se quiere aplicar el mismo formato a un elemento determinado de la página, como el mismo formato a las cabeceras.

Selector de identificador

El selector de identificador se representa con un numeral (#):

#principal {
    color: red;
}

Selecciona aquellos elementos cuyo atributo id coincide con el indicado en el selector. En un selector bastante restrictivo, ya que sólo se debe usar en un único elemento por página. Como buena práctica, debería evitarse en lo posible este selector (utilizando el selector de clase en su lugar) y dejar el identificador para uso exclusivo con Javascript.

Selector de clase

El selector de clase se representa con un punto (.):

.principal {
    color: red;
}

Selecciona aquellos elementos cuyo atributo class coincide con el indicado en el selector. Se trata del selector más utilizado normalmente al aplicar estilo.

Selector descendiente

El selector descendiente se representa concatenando dos selectores seguidos, separados por algún espacio:

.contenedor p {
    color: red;
}

Selecciona aquellos elementos que se encuentran dentro de otros elementos.

Terminando

Éstos son los selectores básicos de CSS, pero existen muchos más que veremos en otro artículo. También puedes ver en los CSS selectores concatenados, como por ejemplo:

p.principal {
    color: red;
}

que selecciona aquellos párrafos cuya clase es principal. También puedes ver selectores separados por coma:

h1, h2 {
    color: red;
}

que aplican la misma regla a más de un selector distinto, así como una mezcla de todos ellos.

Pon un comentario

Tu dirección de email no será publicada.

Puedes usar estas etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>