Puede dirigirse a los denominados elementos hijos. Se trata de elementos que están directamente subordinados a otros elementos. Hay que reconocer que esto suena un poco abstracto, pero se puede explicar muy bien con un ejemplo.
<body> <p>Párrafo 1</p> <p>Párrafo 2</p> <p>Párrafo 3</p> </body>
Aquí body es el elemento padre. Los elementos p son cada uno elementos hijo de body. A partir de este conocimiento, se puede utilizar el selector de elemento hijo.
body>p { color: azul; }
Esta sintaxis convierte todos los párrafos que son hijos directos de body a color azul.
El siguiente ejemplo muestra una vez más las diferencias entre las dos sentencias body p y body>p.
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutoriales.es</title> <meta charset="UTF-8" /> <style> body>p { font-family: "Courier New", Courier, monospace; font-size: 200%; } body p { color:#0066FF; } </style> </head> <body> <p>Párrafo 1</p> <p>Párrafo 2</p> <p>Párrafo 3</p> <div> <p>Párrafo 4</p> </div> </body> </html>Los tres primeros párrafos de texto p definidos son hijos directos de body. La instrucción body p asigna una fuente azul a todos los párrafos de texto. body>p, a su vez, sólo afecta a los tres primeros párrafos de texto. Por lo tanto, estos párrafos también se muestran con una fuente más grande.
A continuación, me gustaría presentarle el selector de elemento subsiguiente. Este selector marca un elemento que sigue inmediatamente a otro elemento y que tiene el mismo elemento padre. He aquí otro ejemplo:
h1+p { color: azul; }
Esta sintaxis establece el color del texto de un párrafo en azul. Sin embargo, sólo se aplica si el párrafo sigue directamente a un encabezamiento de primer orden.
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutoriales.es</title> <meta charset="UTF-8" /> <style> h1+p { color: blue; } </style> </head> <body> <h1>Cabecera</h1> <p>Párrafo 1</p> <h2>Cabecera</h2>
<p>Párrafo 2</p> <p>Párrafo 3</p> <div> <p>Párrafo 4</p> </div> </body> </html>Mira el resultado en el navegador.
Sólo el primer párrafo se muestra en azul. Los demás párrafos aparecen en negro. Esto se debe a que estos elementos p no siguen a h1 sino a h2.
Por cierto, CSS3 ha introducido más opciones con respecto a los elementos subsiguientes. Ahora es posible acceder a todos los elementos subsiguientes de un elemento específico. Un ejemplo:
h1~p { color: rojo; }
Esta sintaxis se dirige a todos los párrafos que siguen a h1.
Por cierto, no sólo es posible dirigirse directamente a los elementos. También es posible acceder a través de los atributos de los elementos.
He aquí algunos de estos selectores:
- att] - Sólo es necesario que el elemento contenga el atributo. Es irrelevante si también se transfiere un valor.
- a[href] - Se marcan todos los hipervínculos (<a href=...>). Sin embargo, esto no se aplica a las definiciones de anclas (<a name=...>).
- align=left] - Marca todos los elementos cuyo atributo align tiene el valor left.
- attr~=value] - Se marcan todos los elementos en los que value está contenido en una lista de valores separada por espacios.
- attr|=valor] - Selecciona un elemento si el valor especificado dentro del atributo está al principio de una cadena de caracteres separada por guiones.
- img[width="200"] - Aquí se marcan todos los gráficos con una anchura de 200 píxeles.
Naturalmente, cabe preguntarse cuándo se necesitan estos selectores de atributos. Piense, por ejemplo, en un formulario y las casillas de verificación definidas en él. Como ya sabrá, las casillas de verificación se definen a través del elemento input. El problema es que el elemento input también se utiliza para definir campos de texto normales. Esto significa que no puedes utilizar input para dar un formato diferente a las casillas de verificación y a los campos de entrada de texto. Aquí es exactamente donde entran en juego los selectores de atributos. Echa un vistazo al siguiente ejemplo para entenderlo mejor:
<body> Nombre: <input type="text" id="name" /> <br /> Hombre: <input type="checkbox" name="gender" id="gender" /> <br /> Mujer: <input type="checkbox" name="gender" id="gender" /> </body>
Aquí se han definido varios elementos de formulario
- un campo de entrada de texto
- dos casillas de verificación
Estos campos deben ser formateados.
input { border:3px solid #000; width: 10em; }Se asigna un borde y un ancho a los campos.
El problema es que la anchura definida sólo debería aplicarse al campo de entrada de texto, pero no a las casillas de verificación. Sin embargo, el selector de elemento no permite distinguir entre los distintos tipos de campo. Para que esta distinción funcione se utilizan selectores de atributos. He aquí un ejemplo de lo que podría parecer:
input[type="checkbox"] { width: auto; }
El selector mostrado en realidad sólo accede a los elementos input que tienen la combinación atributo-valor type="checkbox".
Repeticiones
CSS ofrece por fin la posibilidad de tratar las repeticiones. Naturalmente, surge la pregunta de para qué puede servir esto. Estos selectores son útiles, por ejemplo, si quieres diseñar cada segunda fila de una tabla en un color diferente. Antes de presentar los selectores disponibles, he aquí un ejemplo típico:
<ol id="languages"> <li>HTML</li> <li>HTML5</li> <li>CSS</li> <li>CSS3</li> <liJavaScript <li>JScript</li> <li>Java</li> <li>PHP</li> <li>Python</li> </ol>
Esta es una lista con viñetas normal. Usando CSS, a cada tercera entrada de la lista se le debe asignar un color de fondo.
Para ello se utiliza el selector nth-child(). Este selector se utiliza para dirigirse a cada enésimo elemento hijo.
#idiomas li:nth-child(3n) { color de fondo: rojo; }
Están disponibles los siguientes selectores:
- :root - El selector :root puede utilizarse para dirigirse a la raíz de un documento.
- :nth-child(n) - Controla cada enésimo elemento dentro de un elemento padre. Este selector es especialmente útil si se desea diseñar varios elementos de forma diferente. n es una palabra clave fija a la que se pueden aplicar operaciones aritméticas. n puede equipararse al valor 1.
- :nth-last-child(n) - Controla cada enésimo elemento de un elemento, por lo que los elementos hijos se pasan desde el final.
- :n-ésimo-de-tipo(n)- Controla cada enésimo elemento del mismo tipo HTML en el mismo nivel.
- :nth-last-of-type(n) - Controla cada enésimo elemento del mismo nivel, por lo que los elementos pasan por detrás.
- :first-child - Controla el primer elemento hijo dentro de un elemento.
- last-child - Controla el último elemento hijo dentro de un elemento.
- :first-of-type - Controla el primer elemento del mismo tipo de elemento HTML dentro de un elemento padre.
- last-of-type - Controla el último elemento del mismo tipo de elemento HTML dentro de un elemento padre.
- only-child - Controla un elemento que no tiene ningún elemento hermano y presenta el único elemento hijo en el elemento padre.
- only-of-type - Controla un elemento que no tiene elementos hermanos del mismo tipo HTML y por lo tanto representa el único elemento hijo de este tipo en el elemento padre.
- :empty - Controla los elementos vacíos.
Los selectores presentados aquí facilitan enormemente el trabajo con HTML, ya que las complejas definiciones de clases son cosa del pasado.
