Selectores CSS y jQuery (I). Introducción y selectores simples.

Iniciamos esta serie dedicada a los selectores que se emplean en CSS 3 y en jQuery para referenciar los elementos de un documento web. Todos sabemos, con caracter general, lo que son los selectores. Son identificadores que permiten determinar a que elemento o elementos de una página se va a aplicar un estilo, o se van a ver afectados por una operación. Sin embargo, la mayoría de nosotros estamos muy familiarizados con los selectores que usamos en el día a día, pero no con otros que no usamos a menudo (o que quizá no usamos nunca) y que podrían facilitarnos la vida. En estos artículos pretendemos recopilar todos los selectores que se emplean actualmente, para CSS y para jQuery, a modo de referencia o consulta. No vamos a enseñarte CSS ni jQuery aquí. Damos por sentado que ya te son familiares, en mayor o menor grado. Estos artículos son solo una guía de referencia de los distintos selectores para tenerla a mano.

Selectores CSS y jQuery (II). Selectores compuestos.

Continuamos en este artículo la guía de referencia que iniciamos en el anterior post de esta serie. En esta ocasión vamos a contemplar los selectores compuestos. Realmente, no se trata de un tipo especial de selectores, sino de combinaciones entre selectores simples, que nos permitirán que una recla CSS o una instrucción de jQuery pueda ser aplicada a determinados elementos del documento web, según donde se encuentren situados en el contexto de la página. Por esta razón, en algunos libros se les llama selectores de contexto. Además, cuando avancemos en estos artículos verás que lo que aquí aprenderemos podrá combinarse con lo que veremos más adelante.

Selectores CSS y jQuery (III). Pseudo elementos.

En este artículo tratamos un tema con el que no todo el mundo se siente cómodo, pero que nos ayuda mucho a la hora de programar CSS: los pseudo elementos. Se trata de partes complementarias de un elemento que van asociadas a éste y nos permiten manipular determinadas partes de dicho elemento, sin afectar al resto del mismo. Para aclararnos. Supongamos que tenemos un párrafo de texto en el que queremos que la primera línea aparezca en un color distinto al resto del texto, o con un título en negrita precediéndolo. Si bien todo esto puede hacerse mediante código, es mucho más engorroso y, en ocasiones, inviable desde el punto de vista práctico. Los selectores de pseudo elementos nos ayudan a hacerlo de una forma cómoda, rápida y eficiente.

Selectores CSS y jQuery (IV). Pseudo clases de estado.

Este artículo inicia la referencia de las pseudo clases. Las pseudo clases, como seguramente ya conoces, referencia estados específicos de elementos. Por ejemplo, si un elemento está seleccionado, o tiene el foco, o se le pasa el puntero por encima, se está cambiando su estado. Esto se detecta y gestiona de distinta forma en CSS3 y en jQuery. En CSS se crean reglas específicas para las pseudo clases, mientras que en jQuery se emplean eventos que se disparan cuando se produce un cambio de estado en un elemento. Esto no será siempre así. Existen determinadas pseudo clases que si pueden ser referenciadas como selectores de jQuery, cómo veremos en este artículo y el siguiente. Conoceremos ambas formas de gestión, las diferencias entre un entorno y otro, y la forma de trabajar en cada caso.

Selectores CSS y jQuery (V). Pseudo clases de atributos.

En el artículo anterior hemos visto pseudo clases que afectan a los elementos en base a su estado. Tradicionalmente, este era el concepto de las pseudo clases. Sin embargo, en el panorama actual, existen gran cantidad de pseudo clases que obedecen a otras características de los elementos HTML. En este artículo vamos a conocer siete pseudo clases que se refieren a que un determinado elemento tenga o no aplicado ciertos atributos, lo que nos permitirá definir mucho mejor el aspecto de nuestros documentos web.

Selectores CSS y jQuery (VI). Pseudo clases de contenido.

Existen cuatro pseudo clases en CSS que permiten aplicar reglas de estilo a ciertos campos de HTML 5 en base a que su contenido esté o no adaptado a lo que tales campos permiten. Estamos hablando, específicamente, de los campos de tipo date, que se emplean para fechas, o los de tipo number, que se emplean para que el usuario introduzca valores numéricos. Veamos como gestionarlos desde CSS.

Selectores CSS y jQuery (VII). Pseudo clases de ubicación.

Existen una colección de pseudo clases muy interesantes en CSS 3, que nos permiten seleccionar elementos por la ubicación que ocupan en el documento, o en una parte del mismo. De esta forma, podemos, por ejemplo, tener una página con una gran cantidad de elementos del mismo tipo (párrafos, por ejemplo), y seleccionar los pares o impares, o los que ocupen determinada posición con relación a sus respectivos contenedores, etc. En este artículo vamos a conocer como usar todos estos selectores de forma eficiente para conseguir el diseño que deseemos en cada caso.

Selectores CSS y jQuery (VIII). Otras pseudo clases.

Aún nos quedan por ver dos pseudo clases especiales, que no admitían, por su naturaleza, clasificarlas en otros artículos. Nos pueden permitir mucha mayor flexibilidad a la hora de diseñar nuestras hojas de estilos. Aunque hay algunos desarrolladores que no las emplean, nos pueden facilitar la tarea y ahorrar código, con lo que vamos a incluirlas en nuestra lista de selectores.

Selectores CSS y jQuery (IX). Tabla resumen de selectores.

A lo largo de los artículos anteriores hemos recopilado y analizado todos los posibles selectores con que cuenta CSS 3. Al final de cada artículo hemos incluido una tabla resumen de los selectores contemplados en el mismo. Este artículo es sólo una recopilación de dichas tablas, para que las tengas juntas a mano, a modo de referencia o consulta. Espero que te resulten de utilidad.