Selectores CSS. Que son y como usarlos

Selectores CSS. Que son y como usarlos

Print Friendly, PDF & Email
Selectores CSS. Que son y como usarlos
Valora esta entrada
CSS es un lenguaje que nos permite describir el formato visual de un documento HTML.

Determina como se visualizarán todas y cada una de las etiquetas que conforman una página web.

Todos y cada uno de los aspectos visuales.

Esto significa que es necesario un sistema que nos permita identificar a todas y cada una de las etiquetas de una página web.

Las herramientas que nos permiten hacer este metier son los selectores.

Selector universal

El selector universal sirve para indicar todas las etiquetas del documento web.

Se representa con un asterisco.

*{
//instrucciones CSS
}

Usualmente se utiliza para resetear los estilos de un documento web y asegurar el mismo visionado para todos los navegadores web.

Típicamente en muchas páginas web encontraréis la siguiente instrucción:

*{

margin:0;

padding:0;

}

Selector de etiqueta

El selector de etiqueta sirve afectar con unos estilos determinados todas las etiquetas de un tipo de un documento web. Por ejemplo:

  • Todos los párrafos: p{//instrucciones CSS}
  • Todas las secciones section{//instrucciones CSS}
  • Todos los enlaces a{//instrucciones CSS}
  • Todas las imagenes img{//instrucciones CSS}
p{
//instrucciones CSS que afectarán a todos los párrafos del documento
}

Si varias instrucciones CSS aplican los mismos estilos entonces podemos llamar varios selectores en una misma línea.

Para hacerlo sólo debemos separarlos por comas. Por ejemplo:

Todos los párrafos y todos los enlaces.

p, a{//instrucciones CSS}

Selector descendiente

Selecciona los elementos que se encuentran dentro de otra etiqueta aunque haya etiquetas intermedias en el html.

A los elementos que no estén en el interior no se les aplican los estilos.

p span{
//instrucciones CSS que afectan a todos los span dentro de un párrafo aunque haya etiquetas intermedias.
}

Selector de clase y/o de clase múltiple

Cualquier etiqueta html puede tener un atributo de tipo clase.

Por ejemplo

<span class=”relevante”>Un contenido cualquiera</span>

<p class=”importante”>Un contenido cualquiera</p>

El selector de clase siempre empieza con un punto. Es importante no olvidarlo.

.importante{
//instrucciones CSS que afectan a todas las etiquetas con el atributo de clase importante
}

.importante.destacado{
//instrucciones CSS que afectan a todas las etiquetas con el atributo de clase importante y destacado al mismo tiempo

}

Cuando una etiqueta tiene varias clases simultáneas

<p class=”importante destacado”>texto de un párrafo cualquiera</p>

Entonces el selector recibe el nombre de “selector de clase múltiple”.

Es importante concatenar todas las clases con un punto y sin espacios en blanco. (como en el recuadro negro)

Selector de identificador

En cada documento web sólo puede haber (salvo error) una única etiqueta con un determinado identificador.

El identificador se indica en html mediante el atributo id.

Por ejemplo

<div id=”container”></div>

Para llamarlo mediante un selector se hace de la siguiente forma:

#container{
//instrucciones CSS que afecta a la etiqueta con un id determinado
}

Selector hijo

Los selectores de tipo hijo sirven para seleccionar aquellas etiquetas directamente después de una etiqueta determinada.

Se usa el símbolo “>

li>ul{
//instrucciones CSS que afecta a todas las etiquetas ul directamente después de una etiqueta li sin etiquetas de por el medio.
}

Es importante destacar que no existen etiquetas por el medio.

No significa lo mismo

li ul{…}

que

li>ul{…}

En el primer caso llamamos a todos los ul a continuación de un li aunque haya etiquetas por el medio.

En el segundo caso llamamaos a todos los ul directamente a continuación de una etiqueta li. Si existiera una etiqueta intermedia ya no sería lo mismo.

Selector de atributo

Los selectores de atributo nos sirven para indicar aquellos que tengan un atributo determinado.

Para saber que atributos puede tener una etiqueta dar un vistazo a esta entrada resumen de todos los atributos html que existen.

  • Podemos llamar a las etiquetas que tengan un atributo determinado.
  • Las entradas con un contenido determinado dentro del atributo.
  • Entradas cuyo atributo sea igual, empiece o acabe por unos determinados caracteres.

a[target]{
//instrucciones CSS que afecta a todas las etiquetas a que tengan un atributo de tipo target
}

a[target=”_blank”]{
//instrucciones CSS que afecta a todas las etiquetas a que tengan un atributo de tipo target y cuyo valor sea “_blank”
}

Hay una serie de expresiones que pueden ser útiles.

div[class *=”col-“]{//instrucciones CSS que afectan a todos los div con una clase que empieze contenga “col-“}
div[class $=”4″]{//instrucciones CSS que afectan a todos los div con una clase que termine por “4”}
div[class |=”col-xs-“]{//instrucciones CSS que afectan a todos los div con una clase que empiece por “col-xs-“}

Y hasta aquí una entrada extensa en la que hemos repasado los principales selectores que existen.

Aunque no todos. Es importante tener en cuenta que existen más tipos y que para mayor asimilación no los he incluido en esta guía.

Si quieres saber más de recomiendo darle un vistazo al tutorial de w3schools.

Espero que os pueda ser de utilidad.

¡Hasta mañana!

Entradas relacionadas:

Box Sizing, como modificar el modelo de cajas convencional
- 78
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
Ejemplo de centrado horizontal de una caja con CSS
- 236
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Concepto de cascada en CSS
- 142
En CSS existen una serie de normas que dan prioridad a las instrucciones que afectan a cada etiqueta html en función de su importancia, grado de especificidad y orden de aparición. Veámoslo.
Unidades de medida absolutas y relativas en CSS
- 167
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web
- 57
Ejemplos prácticos y visuales dónde se muestran los posicionamientos static | absolute | relative | fixed | sticky. Incluye código CSS y HTML
Como mezclar CSS y HTML. Acoplamiento CSS
- 162
Existen 3 mecanismos para mezclar html y css. Veamos como se hace.
Dimensiones reales de una caja en CSS
- 113
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Factores que afectan al tiempo de carga de una página web
- 256
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Sintaxis CSS básica. Cómo se escribe el CSS.
- 131
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Como centrar un texto mediante CSS y no con HTML
- 164
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera. La forma correcta de hacerlo es mediante CSS.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.