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:

Maquetar una página de prestashop 1.6 con bootstrap
- 484
Maquetar páginas en Prestashop 1.6 con tablas es un deporte de riesgo para implementadores anclados en el pasado. En esta entrada te muestro un ejemplo sencillo y sin demasiadas complicaciones para qu...
LibrosWeb ahora es UniWebSidad
- 206
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Ejemplo de creación de menú horizontal en CSS: inline-block y float
- 286
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
La propiedad overflow
- 118
Resumen de uso de la propiedad de overflow de CSS. Apuntes de teoría del curso IFCD0110 del curso confección y publicación de páginas web.
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 419
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Pseudo Clases :link, :active, :hover y :visited
- 111
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.
Colores CSS para web
- 626
Existen distintas formas de indicar los colores que queremos dar a los elementos de un documento. Básicamente necesitamos dominar los colores RGB, RGBa y Hexadecimal. Se muestran varios ejemplos de us...
La propiedad z-index
- 76
Resumen y ejemplo de aplicación de la propiedad Z-index. Asignatura CSS curso confección y publicación de páginas web.
Concepto de herencia en CSS
- 285
¿Imaginas tener que especificar una por una los estilos a cada una de las etiquetas? El concepto de CSS nos ayuda a optimizar código. Entender sus propiedades nos puede ayudar mucho a ser mejores maqu...
Ejemplo de menú vertical con submenú horizontal mediante CSS
- 203
Código html y css de como crear un menú vertical con un submenú horizontal.
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.