lunes, 5 de mayo de 2014

Las pseudo-clases estructurales



1. Funcionalidad

El W3C nos propone toda una serie de pseudo-clases estructurales que nos permiten seleccionar con muchísima precisión los distintos elementos de la estructura de nuestras páginas web.


2. La raíz de la página

La pseudo-clase root permite seleccionar la raíz de la página web, es decir, el elemento <html>. La diferencia con el selector de elemento html es sencilla, en la cascada de estilos :root tiene prioridad.


3. El último elemento hijo

En CSS2 teníamos la pseudo-clase :first-child para seleccionar el primer elemento descendiente de un elemento padre. El CSS3 nos propone toda una retahíla de pseudo-clases que nos permiten seleccionar con precisión uno u otro elemento hijo.

La pseudo-clase :last-child permite seleccionar el último elemento hijo de un elemento padre. Este sigue el mismo principio de :first-child. Ambas pseudo-clases resultan en la actualidad muy prácticas a la hora de gestionar la fusión de los márgenes de párrafo en una caja <div>.

Esta es la estructura HTML de la página:

<div id="especial">
<p>Molestie suscipit...</p>
<p>ut facilisis duis at delenit...</p>
<p>Velit quis, dolore...</p>
<p>Suscipit, elit adipiscing dolore ea eum...</p>
</div>

Veamos el CSS para la caja <div>:

#especial {
width: 400px;
border: solid 1px black;
}

Y el resultado visual obtenido:


Como podemos ver, el margen superior del primer párrafo y el margen inferior del último párrafo aparecen en la caja <div>.

Para quitar esos márgenes, podemos usar el selector:

#especial p:first-child, #especial p:last-child {
margin-top: 0;
margin-bottom: 0;
}

Esta sería la visualización si usamos esas dos pseudo-clases:


Los márgenes superior e inferior son ahora de 0.


4. Los elementos descendientes

Para ver cómo se aplica esta pseudo-clase, vamos a tomar como ejemplo una lista <ul>.

Este sería el código HTML de una sencillísima lista:

<ul>
<li>Rojo</li>
<li>Verde</li>
<li>Azul</li>
<li>Gris</li>
<li>Violeta</li>
<li>Amarillo</li>
<li>Negro</li>
</ul>

Puede hacer lo mismo con las líneas <tr> de una tabla.

El estilo CSS será siempre el mismo:

li:nth-child(x){
background-color: gold;
}

La pseudo-clase :nth-child(x) permite seleccionar el enésimo elemento hijo de un elemento padre. Ese número x es el argumento de los paréntesis. 
  • El argumento x puede ser una cifra: :nth-child(2) para seleccionar al segundo hijo.

El resultado visual:


  • El argumento x puede ser una palabra clave: :nth-child(odd) para seleccionar los hijos impares y:nth-child(even) para seleccionar los hijos pares. ¡Resulta ideal para crear alternancias!

El resultado visual:


El argumento x puede ser un cálculo matemático de tipo: an+b. n para representar un valor que comience con 0 y que se incremente con valores distintos de 1. El valor de n puede ser negativo o positivo.

Primer ejemplo:

:nth-child(n+3) permite saltarse los dos primeros hijos.

Este sería el cálculo:

0+3=3, para el tercer hijo,
1+3=4, para el cuarto hijo,
2+3=5, para el quinto hijo...

El resultado visual:


Segundo ejemplo:

:nth-child(-n+3) permite seleccionar los tres primeros hijos.

Este sería el cálculo:

-0+3=3, para el tercer hijo,
-1+3=2, para el segundo hijo,
-2+3=1, para el primer hijo,
-3+3=0, para ningún hijo,
-4+3=-1, para ningún hijo...

El resultado visual:


Tercer ejemplo:

:nth-child(3n) permite seleccionar un hijo de cada 3.

Este sería el cálculo:

3x0=0, para ningún hijo,
3x1=3, para el tercer hijo,
3x2=6, para el sexto hijo,
3x3=9, para el noveno hijo...

La visualización:


Cuarto ejemplo:

:nth-child(3n+1) permite seleccionar un hijo de cada 3 comenzando por el primer hijo.

Este sería el cálculo:

(3x0)+1=1, para el primer hijo,
(3x1)+1=4, para el cuarto hijo,
(3x2)+1=7, para el séptimo hijo,
(3x3)+1=10, para el décimo hijo.

La visualización:


Le recomiendo dos herramientas en línea para probar la pseudo-clase :nth-child(3n+1).

La página web CSS3 structural pseudo-class selector tester de Lea Verou (http://leaverou.me/demos/nth.html). Introduzca la fórmula que desee en el campo de texto y podrá ver en una tabla las líneas que resultarán seleccionadas en función de su fórmula.


Otra página web que sigue el mismo principio es :nth-child tester del sito web CSS-TRICKS (http://css-tricks.com/examples/nth-child-tester/).



5. Los últimos hijos de un elemento

La nueva pseudo-clase :nth-last-child() permite seleccionar los x últimos elementos hijos de un elemento padre. Su funcionamiento es similar al de :nth-child().


6. Los primeros y los últimos elementos de un tipo determinado

Las nuevas pseudo-clases :first-of-type y :last-of-type permiten seleccionar el primer y el último elemento de un tipo específico.

Si volvemos al ejemplo anterior de la lista <ul>, podremos seleccionar el primer y el último elemento <li>.
El estilo CSS sería:

li:first-of-type, li:last-of-type {
background-color: gold;
}

El resultado visual:


Otro ejemplo con una tabla: vamos a seleccionar ahora todas las primeras celdas (<td>) de una tabla.

El código HTML de la tabla:

<table>
<tr><th>Enero</th><th>Febrero</th><th>Marzo</th></tr>
<tr><td>12</td><td>15</td><td>19</td></tr>
<tr><td>13</td><td>11</td><td>14</td></tr>
<tr><td>11</td><td>18</td><td>12</td></tr>
</table>

El estilo CSS:

td:first-of-type {
background-color: #ececec;
}

El resultado visual:



7. Los primeros elementos de un tipo determinado

La pseudo-clase :nth-of-type() permite seleccionar el enésimo elemento de un tipo específico. Los argumentos posibles son los mismos que vimos con la pseudo-clase :nth-child().

Veamos un ejemplo muy sencillo en el que se le ha aplicado un formato (<strong> y <em>) a algunas palabras de un párrafo (<p>):

<p>Donec ullamcorper <strong>nulla</strong> non metus auctor
<em>fringilla</em>. Fusce dapibus, tellus ac cursus commodo,
<strong>tortor</strong> mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Cum sociis natoque
<strong>penatibus</strong> et magnis dis parturient montes.</p>

El elemento <p> presenta como primer elemento hijo el elemento <strong>, como segundo elemento hijo <em> y como tercer y cuarto elementos hijo nuevamente <strong>. Nosotros queremos seleccionar el segundo elemento <strong>, y no el segundo elemento hijo.

Veamos el estilo CSS:

strong:nth-of-type(2) {
background-color: gold;
}

Y se mostraría así:


La clase :nth-last-of-type() permite seleccionar el enésimo último elemento de un tipo específico.


8. Los elementos únicos

La pseudo-clase :only-child permite seleccionar aquellos elementos que no tengan hermanos. Veamos por ejemplo un texto <p> en el cual hemos resaltado elementos con <strong>. Supongamos que queremos resaltar los párrafos que solamente contengan un único elemento <strong>.

Este sería el código HTML. El segundo párrafo <p> contiene dos elementos <strong>, el primer párrafo solamente contiene uno.

<p>Donec sed odio dui. Aenean <strong>lacinia
bibendum</strong> nulla sed consectetur.Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies
vehicula ut id elit.</p>
<p>Nullam id dolor id <strong>nibh</strong> ultricies vehicula
ut id elit. Cum sociis natoque penatibus et magnis dis
montes, <strong>nascetur</strong> ridiculus mus.</p>

Veamos el estilo CSS utilizado:

strong:only-child {
background-color: gold;
}

Y el resultado visual obtenido:



9. Los elementos hijo único de un tipo determinado

La pseudo-clase :only-of-type permite seleccionar los elementos de un tipo determinado que no tengan hermanos.

Volvamos al ejemplo anterior y añadamos un formato con <em> en el primer párrafo.

<p>Donec sed odio dui. Aenean <strong>lacinia
bibendum</strong> nulla sed consectetur.Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id <em>nibh
ultricies</em> vehicula ut id elit.</p>
<p>Nullam id dolor id <strong>nibh</strong> ultricies vehicula
ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes,
<strong>nascetur</strong> ridiculus mus.</p>

Con el estilo CSS anterior, el elemento <strong> del primer párrafo ya no aparecerá resaltado con un fondo de color, ya que ahora ese párrafo contiene dos elementos de formato. El elemento <strong> ya no está solo, ahora también tenemos una etiqueta <em>. Con la pseudo-clase :only-of-type podemos especificar el tipo de elemento aislado.

Veamos el estilo CSS:

strong:only-of-type {
background-color: gold;
}

Y el resultado visual:



10. Los elementos vacíos

La pseudo-clase :empty permite seleccionar los elementos vacíos, es decir, aquellos que no contienen otros elementos. Esto resulta bastante práctico para las páginas web creadas dinámicamente. Podemos tener elementos (<li>, <td>, <strong>...) que estén vacíos. Con esta pseudo-clase podemos resaltarlos para localizarlos fácilmente.

La siguiente lista <ul> contienen dos <li> vacíos:

<ul>
<li>Rojo</li>
<li>Verde</li>
<li></li>
<li>Gris</li>
<li></li>
<li>Amarillo</li>
<li>Negro</li>
</ul>

Veamos el estilo CSS utilizado:

li:empty {
background-color: gold;
}

Y el resultado visual obtenido:



11. Todos los elementos excepto el elemento seleccionado

La pseudo-clase :not() es realmente muy práctica. Nos permite seleccionar todos los demás elementos a excepción del elemento especificado.

Tomemos como ejemplo un párrafo que contenga varios elementos de formato: <strong>, <em>, <ul>... Supongamos que en los párrafos <p> queremos cambiar la presentación visual de todos los elementos a excepción del elemento <u>.

El código HTML del párrafo:

<p>Et exerci feugait, <em>facilisis vulputate</em> feugiat,
hendrerit <u>veniam vero</u>? Ut praesent accumsan, nisl
consequatvel feugiat at duis ex <strong>vel ea dignissim</strong>
duis dignissim, velit qui, suscipit hendrerit vero. <em>Dolore
esse</em> luptatum blandit <u>eum commodo blandit</u> feugiat dolore
feugiat nisl veniam nibh veniam, et in nisl <strong>consequat
ut?</strong></p>

El estilo CSS:

p>:not(u){
background-color: gold;
}

Y el resultado en pantalla:



Espero haber ayudado en algo. Hasta la próxima oportunidad!



No hay comentarios:

Publicar un comentario

       

Etiquetas

Academy (23) Accediendo a datos con ADO .NET (31) Acceso a la red (30) Algoritmo (34) Algoritmos en JAVA (2) Ampliación de clases (2) APRENDA A PROGRAMAR COMO SI ESTUVIERA EN PRIMERO - Autores : IKER AGUINAGA (3) APRENDA A PROGRAMAR COMO SI ESTUVIERA EN PRIMERO - Autores : IKER AGUINAGA (10) Aprendiendo a desarrollar en Windows 8 (5) Aprendiendo UML en 24 Horas (Autor : Joseph Schmuller ) (30) Arquitectura (29) Arquitectura del Computador (3) Arquitectura del Computador - Historia de la informática (1) Asignación de direcciones IP (23) Aspectos fundamentales de bases de datos (5) Auditoría de la dirección (2) Auditoría de Sistemas (3) Auditoría Informática - Un enfoque práctico - Mario G . Piattini y Emilio del Peso (7) Avanzado (23) Base de Datos (67) Básico (23) Bios (29) Business Productivity Online Suite - BPOS (3) Capa de Red (22) Capa de Transporte (16) Capítulo 1 - Documentos HTML5 (6) Capítulo 10. API Web Storage (2) Capítulo 11. API IndexedDB (4) Capítulo 12. API File (1) Capítulo 2. Estilos CSS y modelos de caja (7) Capítulo 3. Propiedades CSS3 (4) Capítulo 4. Javascript (6) Capítulo 5. Video y audio (6) Capítulo 6. Formularios y API Forms (8) Capítulo 7. API Canvas (5) Capítulo 8. API Drag and Drop (2) Capítulo 9. API Geolocation (2) CCNA1 v5.0 (227) CCNA1 v6.0 (23) CCNA2 v5.0 (26) CCNA3 v5.0 (25) CCNA4 v5.0 (23) CD-ROM (3) Chapter 1 How does Xamarin.Forms fit in? (7) Chapter 2 Anatomy of an app (5) Cisco (329) Cloud Computing (3) CNNA v5.0 Routing & Switching (248) CNNA v6.0 Routing & Switching (2) Codigo (2) Computadora (32) Configuración (29) Configuración de un sistema operativo de red (21) Control (29) Creación de tipos de datos y tablas (3) Creación y Administración de bases de datos (3) Creando la Interface de la Aplicación Windows (50) Creating Mobile Apps with Xamarin.Forms (13) Cuenta (29) Curso (32) Curso Aprendiendo a Programar (25) Datos (3) Desarrollando en Windows 8 - AVANZADO (2) Desarrollando en Windows 8 - BÁSICO (3) Desarrollando en Windows 8 - INTERMEDIO (2) Desarrollo (2) Desarrollo .Net (21) Desarrollo avanzado de Windows Store Apps usando C# (1) Desarrollo basado en conceptos de Ingeniería de Software para Visual Studio (2) DESARROLLO DE APLICACIONES WINDOWS CON MICROSOFT .NET (37) DESARROLLO DE APLICACIONES WINDOWS CON MICROSOFT .NET (Autor: Luis Dueñas Huaroto) (29) Desarrollo en Microsoft Visual Studio (44) Desarrollo en Microsoft Visual Studio - AVANZADO (15) Desarrollo en Microsoft Visual Studio - BÁSICO (14) Desarrollo en Microsoft Visual Studio - INTERMEDIO (18) Desarrollo en Windows Phone 8 (13) Diagnostico (4) Diagrama (3) Diagramas de actividades (2) Diagramas de colaboraciones (2) Diagramas de secuencias (2) Digital (2) Diplomado (2) Disco (29) Disco Duro (4) Diseño de aplicaciones de Windows 8 en HTML 5 (7) Dispositivos Electrónicos (11) Doctorado (2) Ejemplos (3) Ejemplos de algoritmos (27) El camino hacia el CSS3 (3) El diseño web flexible (6) El elemento de diseño Canvas (3) El enfoque de los sistemas (3) El flujo de un programa (2) El gran libro de HTML5 - CSS3 y Javascript - Autor: Juan Diego Gauchat (55) El principio de organicidad (7) Electrónica (2) Elementos de un sistema (5) Empresas (2) Entrada y salida (4) Entropía y neguentropía (7) Estrategia (2) Estructura de un programa Java (12) Estructuras de almacenamiento (10) Estructuras de control (6) Estructuras de las tablas en SQL Server (2) Estructuras fundamentales de los datos (2) Ethernet (21) Evolución y Familias de los Microprocesadores (15) Exámen (23) Exploración de la red (23) Extensión de clases (4) Facebook (4) Familia Intel (15) Forefront (8) Función (3) Funciones de una red (12) Funciones de una red informática (1) Fundamentos de C# para absolutos principiantes (17) Fundamentos de programación en Java (50) Generaciones de la computadora (5) Gestión (3) Gestión de riesgos - Auditoría de Sistemas (1) GONZALO MARTÍNEZ (1) Grupos Facebook (1) Harvard (29) Historia de las computadoras (11) HTML5 y CSS3 - Autor: Christophe Aubry (99) HTML5 y CSS3 aplicadal texto (7) HTML5 y CSS3 para los formularios (15) Imágenes (2) Implementación de Windows 7 (11) Información (31) Informática (29) Ingeniería (4) Instalar (29) Inteligencia (2) Inteligencia de Negocios con SQL Server (3) Intermedio (23) Internet (29) Internet Explorer 9 (3) Introducción a ASP.NET 5 (8) Introducción a Java (7) Introducción a jQuery (8) Introducción a la Auditoría de Sistemas (2) Introducción a la teoría general de sistemas (Oscar Johansen Bertoglio) (39) Introducción a Networking (2) Introducción a Window Forms (5) Introducción al acceso a datos con ADO .NET (9) Investigación de Operaciones (12) Java (52) Jump Start de consultas en las bases de datos de Microsoft SQL Server 2012 (8) La definición de un Sistema (6) La evolución del HTML y del CSS (3) La nueva sintaxis HTML5 (12) LA QUINTA DISCIPLINA en la práctica (Autor : Peter Senge) (28) Las animaciones en CSS3 (5) Las transformaciones CSS3 (11) Las transiciones con CSS3 (8) Licenciamiento Microsoft (3) Local Area Network (LAN) - Red de Area Local (2) Lógico (2) Los elementos de la estructura en html5 (9) Los elementos multimedia: audio y vídeo (2) Los estilos de caja en CSS3 (13) Los nuevos selectores de CSS3 (6) Maestría (2) Mantenimiento de Mouse y Teclado (2) Manual de Microsoft SQL Server - Full Transact SQL (68) Manual de soporte técnico para escuelas sobre windows 7 (42) Marco Teorico de Investigación de Operaciones (6) Medios de Almacenamiento (11) Medios de Networking (2) Mejorando la Interface de las Aplicaciones Windows (26) Memoria Tipos y Clases (5) Método (2) Metodología (1) Microsoft (324) Microsoft Lync 2010 (7) Microsoft Silverlight 4.0 (2) Microsoft Virtual Academy (356) Modelo (2) Modelo OSI y TCP-IP (2) Modelos con poco grado de dificultad de Programación Lineal - Investigación de Operaciones (13) Modelos con razonable grado de dificultad de Programación Lineal - Investigación de Operaciones (10) Modelos de desafio de Programación Lineal - Investigación de Operaciones (5) Modelos difíciles de Programación Lineal - Investigación de Operaciones (5) Modelos Fáciles de Programación Lineal - Investigación de Operaciones (13) Modelos lineales con solver (3) Modulo (23) Movimiento (2) Mozilla (29) MS SQL Server (77) MS Virtualization para Profesionales VMware - Gestión (3) MS Virtualization para Profesionales VMware- Plataforma (4) MVA (263) Negocio (2) Nivel Avanzado Desarrollo .Net (6) Nivel Básico Desarrollo .Net (11) Nivel Intermedio Desarrollo .Net (8) Normas técnicas peruanas y su evolución - Auditoría de Sistemas (1) Nube Privada - Avanzado (6) Nube Privada - Básico (6) Nube Privada - Intermedio (6) Office 365 (3) Optimización de Escritorio (10) Optimización de Escritorio - Avanzado (4) Optimización de Escritorio - Básico (3) Optimización de Escritorio - Intermedio (3) ORACLE 10g - ADMINISTRACIÓN Y ANÁLISIS (3) Oracle 10g y el Grid Computing (3) Organización aleatoria y secuencial (1) Partes principales de la Mainboard (12) Perceptron (2) Perfil (2) Periféricos de Entrada / Salida (15) Pesi (2) PHP y MySQL - Manual de aprendizaje para crear un sitio web - Autor : Olivier ROLLET (79) Plan (2) Plataforma (29) PMBOK (24) PMBOK - Guía de los fundamentos para la dirección de proyectos (24) PMBOK - INFLUENCIA DE LA ORGANIZACIÓN Y CICLO DE VIDA DEL PROYECTO (6) PMBOK - Introducción (11) PMBOK - PROCESOS DE LA DIRECCIÓN DE PROYECTOS (5) Prevención - Herramientas e Instrumentos de Medida (9) Principios básicos de enrutamiento y switching (201) Proceso (2) Proceso de auditoría de sistemas informáticos (2) Programación en Android - Auor : Salvador Gómez Oliver (46) Programación paso a paso de C# - Autor : Nacho Cabanes (16) Protocolos y comunicaciones de red (17) Proyecto (2) Qué es un sistema (4) Red de Área Local Inalámbrica (WLAN) (4) Redes (30) Redes inalámbricas - WIRELESS - Conocimiento general (15) Redes neuronales (2) Redes y Comunicaciones (45) Reparación de Fuentes - UPS - Estabilizadores (10) Reparación de Impresoras (9) Reparación de Monitores (16) Router (29) Seguridad en la Nube (3) Seminario (23) Server (24) Sharepoint 2010 - Nivel Básico (6) Sharepoint 2010 - Niveles Avanzados (18) Sharepoint 2010 - Niveles Avanzados - Básico (8) Sharepoint 2010 - Niveles Avanzados - Intermedio (9) Sinergia y recursividad (4) Sistema (33) Sistema de Cableado Estructurado (9) Software (30) SOLUCIÓN GRÁFICA DE MODELOS DE PROGRAMACIÓN LINEALES - INVOPE (8) Soporte a Infraestructura (3) SQL (38) SQL Azure - Introducción (3) Subsistemas de control (4) Tablas (4) Tarjeta Principal del Sistema (10) Tarjetas de Interfaces (7) Tecnología (31) Tecnologías LAN (1) TEORÍA GENERAL DE SISTEMAS (1) Tic (2) Tipo (2) TML5 y CSS3 - Autor: Christophe Aubry (12) Trabajando con el Formulario (7) Un diseño HTML5/CSS3: dConstruct 2011 (3) Un diseño HTML5/CSS3: FlipThru (2) Un diseño HTML5/CSS3: The Cat Template (2) Usando Controles Windows Forms (12) Usando Herramientas de Datos de Visual Studio (6) Ventas (2) Virtualización Hyper - V Nivel Básico (5) Virtualización Hyper - V Nivel Intermedio (5) What’s New in Windows 8.1 Security (4) Window (29) Windows 7 Segunda Fase - AVANZADO (4) Windows 7 Segunda Fase - BÁSICO (6) Windows 7 Segunda Fase - INTERMEDIO (4) Windows 8 - Vista Previa (4) Windows 8.1 To Go (2) Windows Azure (3) Windows Phone 7 (2) Windows Server 2008 R2 (3) Windows Server 2012 - Gestión y Automatización (3) Windows Server 2012 R2 Essentials (7) Windows Server 2012: Almacenamiento (5) Windows Server 2012: Identidad y Acceso (4) Windows Server 2012: Revisión Técnica (7) Xamarin (1)

Páginas vistas en total según Google