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.
LAS PSEUDO CLASES :first-child Y :last-child
Estas pseudo clases seleccionan los elementos que ocupan, respectivamente, el primero y el último puesto, dentro de su contenedor padre, si son del tipo indicado junto a la pseudo clase. Dicho así suena bastante críptico, así que lo veremos con un ejemplo. Mira el siguiente HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Pseudo clases</title> <link href="estilos.css" rel="stylesheet"> </head> <body> <div class="contenedor"> <p>Párrafo 1-1</p> <p>Párrafo 1-2</p> <p>Párrafo 1-3</p> <p>Párrafo 1-4</p> </div> <div class="contenedor"> <p>Párrafo 2-1</p> <p>Párrafo 2-2</p> <p>Párrafo 2-3</p> <p>Párrafo 2-4</p> <span>Etiqueta span 2</span> </div> <div class="contenedor"> <span>Etiqueta span 3</span> <p>Párrafo 3-1</p> <p>Párrafo 3-2</p> <p>Párrafo 3-3</p> <p>Párrafo 3-4</p> </div> </body> </html> |
Como ves, hay tres contenedores div
. Cada uno de ellos es contenedor padre de distintos párrafos (elementos p
) y, en algunos casos, de otros elementos que no son de tipo p
(en el ejemplo, los que hemos definido como etiquetas span
). A su vez, el body
es el contenedor padre de los elementos div
. Fíjate que hemos numerado los párrafos, para poder identificarlos con facilidad cuando ejecutemos la página en el navegador. Ahora veamos el CSS:
1 2 3 4 5 6 7 8 |
p:first-child{ border: 1px solid #0a6301; background-color: #9aef92; } p:last-child{ border: 1px solid red; background-color: #f9a4a4; } |
Vemos que actuamos sobre dos pseudo clases aplicadas a los elementos
p
. La pseudo clase :first-child
establece un color verde y la pseudo clase :last-child
establece un color rojo.
La pseudo clase :first-child
se refiere al primer elemento dentro de un contendor padre, si este es del tipo indicado (en este caso, p
). Por lo tanto, en el primer contendor div
afectará al primer elemento, ya que es el primero que hay dentro del contenedor, y es de tipo p
. En el segundo contenedor div
afectará también al primer elemento, ya que es el primero en este contenedor, y es de tipo p
. Sin embargo, en el tercer contendor div
no afectará a ningún elemento, ya que el primer descendiente del div
no es p
, sino span
, y el primer p
que hay dentro de este tercer div
no es el primer descendiente.
Con la pseudo clase :last-child
ocurre lo mismo, pero refiriéndonos al último elemento, en lugar de al primero. Por lo tanto, vemos que, en el primer contenedor div
, se afecta al último párrafo, ya que es de tipo p
(cómo hemos definido en la hoja de estilos) y es el último descendiente del contenedor. Lo mismo ocurre con el tercer contenedor div
: el último descendiente es del tipo p
referido en la hoja de estilos, por lo que también se ve afectado por las reglas CSS correspondientes. Sin embargo, en el segundo contenedor div
el último descendiente no es del tipo p
, por lo que ningún hijo de este contenedor se ve afectado por estas reglas.
A la derecha vemos el aspecto del documento, con los párrafos correctos afectados.
Estas pseudo clases pueden emplearse, directamente, como selectores en jQuery. Por lo tanto, podríamos obtener el mismo resultado sin hoja de estilos externa, con el siguiente código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Pseudo clases</title> </head> <body> <div class="contenedor"> <p>Párrafo 1-1</p> <p>Párrafo 1-2</p> <p>Párrafo 1-3</p> <p>Párrafo 1-4</p> </div> <div class="contenedor"> <p>Párrafo 2-1</p> <p>Párrafo 2-2</p> <p>Párrafo 2-3</p> <p>Párrafo 2-4</p> <span>Etiqueta span 2</span> </div> <div class="contenedor"> <span>Etiqueta span 3</span> <p>Párrafo 3-1</p> <p>Párrafo 3-2</p> <p>Párrafo 3-3</p> <p>Párrafo 3-4</p> </div> <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script language="javascript"> $('p:first-child').css({ "border": "1px solid #0a6301", "background-color": "#9aef92" }); $('p:last-child').css({ "border": "1px solid red", "background-color": "#f9a4a4" }); </script> </body> </html> |
En las líneas resaltadas puedes ver claramente cómo hemos hecho esto. Observa que el resultado es el mismo que antes, pero sin haber enlazado ninguna hoja de estilos.
LAS PSEUDO CLASES :first-of-type Y :last-of-type
Estas son similares a las que acabamos de ver, con un diferencia sutil. La pseudo clase :first-of-type
se refiere al primer elemento que encuentra del tipo especificado, dentro de su contenedor padre, aunque no sea el primer descendiente de dicho padre. La pseudo clase :last-of-type
se refiere al último elemento que sea del tipo especificado, dentro del contenedor padre, aunque no sea el último descendiente de dicho contenedor.
Para aclararnos, suponte el mismo HTML que en el primer ejemplo (el que no tienen jQuery), pero con la siguiente hoja de estilos enlazada:
1 2 3 4 5 6 7 8 |
p:first-of-type{ border: 1px solid #0a6301; background-color: #9aef92; } p:last-of-type{ border: 1px solid red; background-color: #f9a4a4; } |
Esto aplicará las reglas que establecen el color verde al primer elemento p
de cada contenedor, aunque no sea el primer descendiente de dicho contenedor. Por lo tanto, pondrá en verde los párrafos 1-1, 2-1 y 3-1. Las reglas que establecen el color rojo se aplican al último elemento p
de cada contenedor, aunque no sea el último elemento descendiente del mismo, por lo que se pondrán en rojo los párrafos 1-4, 2-4 y 3-4.
Estas pseudo clases también pueden ser empleadas como selectores en jQuery, cómo ves a continuación:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Pseudo clases</title> </head> <body> <div class="contenedor"> <p>Párrafo 1-1</p> <p>Párrafo 1-2</p> <p>Párrafo 1-3</p> <p>Párrafo 1-4</p> </div> <div class="contenedor"> <p>Párrafo 2-1</p> <p>Párrafo 2-2</p> <p>Párrafo 2-3</p> <p>Párrafo 2-4</p> <span>Etiqueta span 2</span> </div> <div class="contenedor"> <span>Etiqueta span 3</span> <p>Párrafo 3-1</p> <p>Párrafo 3-2</p> <p>Párrafo 3-3</p> <p>Párrafo 3-4</p> </div> <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script language="javascript"> $('p:first-of-type').css({ "border": "1px solid #0a6301", "background-color": "#9aef92" }); $('p:last-of-type').css({ "border": "1px solid red", "background-color": "#f9a4a4" }); </script> </body> </html> |
LAS PSEUDO CLASES :nth-child(n) Y :nth-last-child(n)
La pseudo clase :nth-child(n)
afecta al elemento del tipo referenciado que ocupa el lugar n dentro de su contenedor. Si el elemento n
no es del tipo referenciado, no lo afecta. Observa el siguiente HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Pseudo clases</title> <link rel="stylesheet" href="estilos.css"> </head> <body> <div class="contenedor"> <p>Párrafo 1-1</p> <span>Etiqueta span 1</span> <p>Párrafo 1-2</p> <p>Párrafo 1-3</p> <p>Párrafo 1-4</p> </div> <div class="contenedor"> <p>Párrafo 2-1</p> <p>Párrafo 2-2</p> <p>Párrafo 2-3</p> <span>Etiqueta span 2</span> <p>Párrafo 2-4</p> </div> <div class="contenedor"> <span>Etiqueta span 3</span> <p>Párrafo 3-1</p> <p>Párrafo 3-2</p> <p>Párrafo 3-3</p> <p>Párrafo 3-4</p> </div> </body> </html> |
Ahora mira la hoja de estilos CSS:
1 2 3 4 |
p:nth-child(2){ border: 1px solid #0a6301; background-color: #9aef92; } |
Hemos creado una regla que afecta a los párrafos que sean segundo elemento de su contenedor (por el argumento 2
de la pseudo clase). Mira el HTML. Fíjate que en el primer contenedor div
el segundo elemento no es un párrafo. Hay párrafos, sí, pero ninguno es el segundo hijo del contenedor. Por lo tanto, ningún elemento de este contendor se verá de color verde. En cambio, en los otros dos contenedores div
, el segundo descendiente si es un párrafo. Por lo tanto, los párrafos 2-2 y 3-2 sí se verán afectados.
Con :nth-last-child(n)
pasa lo mismo, sólo que empezando a contar los elementos desde el último de cada contenedor. Suponte que al HTML que acabamos de ver le enlazamos la siguiente hoja de estilos:
Contamos los descendientes de cada contenedor, empezando por el final. En el prier contenedor, el segundo elemento por el final es un párrafo (el 1-3), por lo que se verá afectado. Lo mismo ocurre con el tercer contenedor. Sin embargo, en el segudo contenedor, el segundo elemento por el final no es un párrafo. Hay otros párrafos, pero no ocupan esa posición. Por lo tanto, en el segundo contenedor, ningún elemento se verá afectado por las reglas CSS establecidas.
Estas pseudo clases también pueden ser usadas como selectores directamente en jQuery. Observa el siguiente listado:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Pseudo clases</title> </head> <body> <div class="contenedor"> <p>Párrafo 1-1</p> <span>Etiqueta span 1</span> <p>Párrafo 1-2</p> <p>Párrafo 1-3</p> <p>Párrafo 1-4</p> </div> <div class="contenedor"> <p>Párrafo 2-1</p> <p>Párrafo 2-2</p> <p>Párrafo 2-3</p> <span>Etiqueta span 2</span> <p>Párrafo 2-4</p> </div> <div class="contenedor"> <span>Etiqueta span 3</span> <p>Párrafo 3-1</p> <p>Párrafo 3-2</p> <p>Párrafo 3-3</p> <p>Párrafo 3-4</p> </div> <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script language="javascript"> $('p:nth-child(2)').css({ "border": "1px solid #0a6301", "background-color": "#9aef92" }); $('p:nth-last-child(2)').css({ "border": "1px solid red", "background-color": "#f9a4a4" }); </script> </body> </html> |
Fíjate en las líneas resaltadas, y pruébalo para ver su comportamiento.
LAS PSEUDO CLASES :nth-of-type(n) Y :nth-last-of-type(n)
Estas son similares a las anteriores, pero se refieren al elemento n especificado dentro de su contenedor, aunque no sea el hijo n. Aclarémonos: Con el HTML del ejemplo anterior (el que no emplea jQuery), vamos a asociar la siguiente hoja de estilos:
1 2 3 4 5 6 7 8 |
p:nth-of-type(2){ border: 1px solid #0a6301; background-color: #9aef92; } p:nth-last-of-type(2){ border: 1px solid red; background-color: #f9a4a4; } |
La regla p:nth-of-type(2)
se refiere al segundo descendiente de tipo p
de cada contenedor, aunque no sea el segundo hijo de dicho contenedor. Lo vemos claro en el caso concreto del primer contenedor. El segundo hijo es un elemento span
. No obstante, el segundo párrafo (que es el tercer hijo del contenedor) se ve afectado.
Con la regla p:nth-last-of-type(2)
ocurre lo mismo, sólo que empezando a contar los hijos de cada contenedor desde el último, no desde el primero.
Estas dos pseudo clases también pueden ser usadas como selectores en jQuery, como ves a continución:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Pseudo clases</title> </head> <body> <div class="contenedor"> <p>Párrafo 1-1</p> <span>Etiqueta span 1</span> <p>Párrafo 1-2</p> <p>Párrafo 1-3</p> <p>Párrafo 1-4</p> </div> <div class="contenedor"> <p>Párrafo 2-1</p> <p>Párrafo 2-2</p> <p>Párrafo 2-3</p> <span>Etiqueta span 2</span> <p>Párrafo 2-4</p> </div> <div class="contenedor"> <span>Etiqueta span 3</span> <p>Párrafo 3-1</p> <p>Párrafo 3-2</p> <p>Párrafo 3-3</p> <p>Párrafo 3-4</p> </div> <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script language="javascript"> $('p:nth-of-type(2)').css({ "border": "1px solid #0a6301", "background-color": "#9aef92" }); $('p:nth-last-of-type(2)').css({ "border": "1px solid red", "background-color": "#f9a4a4" }); </script> </body> </html> |
USO AVANZADO DE :nth-of-type Y :nth-last-of-type
Hemos visto que las últimas dos pseudo clases reciben un argumento numérico, para apuntar a un elemento concreto. Sin embargo, pueden darnos mucho más juego, cambiando ese argumento por otro más específico. Por ejemplo, podemos usar la pseudo clase :nth-of-type(odd)
para referirnos a todos los elementos impares, contando desde el primero que hay en el contenedor, o :nth-last-of-type(odd)
para referirnos a todos los elementos impares que hay en el contenedor, empezando a contar por el último. Si en lugar de odd
, el argumento es even
, apuntaremos, en cada caso, a los elementos pares. Como siempre, unos ejemplos nos aclaran esto. Observa el siguiente HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Pseudo clases</title> <link rel="stylesheet" href="estilos.css"> </head> <body> <div class="contenedor">Elemento 1</div> <div class="contenedor">Elemento 2</div> <div class="contenedor">Elemento 3</div> <div class="contenedor">Elemento 4</div> <div class="contenedor">Elemento 5</div> <div class="contenedor">Elemento 6</div> <div class="contenedor">Elemento 7</div> <div class="contenedor">Elemento 8</div> </body> </html> |
Como ves, tenemos ocho elementos div
. Estos, a su vez, están dentro de un contenedor, que es el elemento body
. Además, dicho elemento, está dentro de un contenedor que es el elemento html
. Como puedes ver, aunque a primera vista no lo parezca, siempre existe una jerarquía en los documentos HTML. Ahora observa el siguiente CSS:
1 2 3 4 5 6 7 8 |
div:nth-of-type(odd){ border: 1px solid #0a6301; background-color: #9aef92; } div:nth-of-type(even){ border: 1px solid red; background-color: #f9a4a4; } |
Como ves, lo que hacemos es que los elementos div impares contando desde el principio (div:nth-of-type(odd)
), se pongan verdes, mientras que los elementos pares contando desde el principio (div:nth-of-type(even)
) se ponen rojos.
Si, en lugar de :nth-of-type
empleamos :nth-last-of-type
, vemos como se cambian las reglas CSS, ya que, al haber un número par de elementos (ocho elementos div
), los pares contando desde el principio son los impares, contando desde el final.
Esto, que nos viene estupendo cuando, por ejemplo, tenemos que tener una colección de elementos con un aspecto alterno para visualización, digamos, de datos tabulares, puede hacerse también desde jQuery:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Pseudo clases</title> </head> <body> <div class="contenedor">Elemento 1</div> <div class="contenedor">Elemento 2</div> <div class="contenedor">Elemento 3</div> <div class="contenedor">Elemento 4</div> <div class="contenedor">Elemento 5</div> <div class="contenedor">Elemento 6</div> <div class="contenedor">Elemento 7</div> <div class="contenedor">Elemento 8</div> <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script language="javascript"> $('div:nth-of-type(odd)').css({ "border": "1px solid #0a6301", "background-color": "#9aef92" }); $('div:nth-of-type(even)').css({ "border": "1px solid red", "background-color": "#f9a4a4" }); </script> </body> </html> |
Y todavía le podemos sacar más partido a estas pseudo clases. Imagina que tenemos una colección de elementos (similar a las que estamos viendo), y queremos aplicar una regla CSS a uno de cada cuatro elementos. Es decir, se la aplicaremos al cuarto, al octavo, y así, sucesivamente. Observa el siguiente HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Pseudo clases</title> <link rel="stylesheet" href="estilos.css"> </head> <body> <div class="contenedor">Elemento 1</div> <div class="contenedor">Elemento 2</div> <div class="contenedor">Elemento 3</div> <div class="contenedor">Elemento 4</div> <div class="contenedor">Elemento 5</div> <div class="contenedor">Elemento 6</div> <div class="contenedor">Elemento 7</div> <div class="contenedor">Elemento 8</div> <div class="contenedor">Elemento 9</div> <div class="contenedor">Elemento 10</div> <div class="contenedor">Elemento 11</div> <div class="contenedor">Elemento 12</div> <div class="contenedor">Elemento 13</div> <div class="contenedor">Elemento 14</div> <div class="contenedor">Elemento 15</div> <div class="contenedor">Elemento 16</div> <div class="contenedor">Elemento 17</div> <div class="contenedor">Elemento 18</div> <div class="contenedor">Elemento 19</div> <div class="contenedor">Elemento 20</div> <div class="contenedor">Elemento 21</div> <div class="contenedor">Elemento 22</div> <div class="contenedor">Elemento 23</div> <div class="contenedor">Elemento 24</div> <div class="contenedor">Elemento 25</div> <div class="contenedor">Elemento 26</div> <div class="contenedor">Elemento 27</div> <div class="contenedor">Elemento 28</div> <div class="contenedor">Elemento 29</div> <div class="contenedor">Elemento 30</div> </body> </html> |
Cómo ves, tenemos 30 elementos div
. Ahora observa la hoja de estilos:
1 2 3 4 |
div:nth-of-type(4n + 0){ border: 1px solid #0a6301; background-color: #9aef92; } |
Si lo que queremos es aplicar la regla CSS a uno de cada cuatro elementos, el argumento de la pseudo clase obecede a la siguiente fórmula: an + b
, donde los valores son los siguientes:
a
. Se refiere a cada cuantos elementos debemos seleccionar. Para seleccionar uno de cada cuatro, este valor es4
.n
. Como ves, se pone directamente la letran
, como una constante. Actúa como separador, pero solo puedes usar lan
.b
. Es el elemento a partir del cual se empieza a seleccionar. Si pones, como en el ejemplo, 0, se cuentan los tres primeros y luego se selecciona el cuarto, y así sucesivamente. Si, por ejemplo, ponemos 6, este será el primer elemento que se selecciona, y de ahí en adelante, cada 4.
Este uso del selector también puede aplicarse contando desde el final de la colección de elementos, y también puede usarse desde jQuery.
LA PSEUDO CLASE :only-of-type
Esta pseudo clase se refiere a un elemento cuando es el único de ese tipo que hay en su contenedor padre. Veámoslo con un ejemplo. Observa el siguiente HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Pseudo clases</title> <link rel="stylesheet" href="estilos.css"> </head> <body> <div class="contenedor"> <p>Párrafo 1-1</p> </div> <div class="contenedor"> <p>Párrafo 2-1</p> <p>Párrafo 2-2</p> <p>Párrafo 2-3</p> </div> <div class="contenedor"> <p>Párrafo 3-1</p> <span>Esto es un span en el tercer contenedor</span> </div> <div class="contenedor"> <p>Párrafo 4-1</p> <p>Párrafo 4-2</p> <p>Párrafo 4-3</p> </div> <div class="contenedor"> <p>Párrafo 5-1</p> <p>Párrafo 5-2</p> <p>Párrafo 5-3</p> </div> </body> </html> |
Como ves, hay dos contenedores div
que tienen un solo elemento p
, mientras que el resto de los contenedores tienen más de uno. Observa el CSS:
1 2 3 4 |
p:only-of-type{ border: 1px solid #0a6301; background-color: #9aef92; } |
Este selector afecta a los elementos especificados que son el único de ese tipo dentro del contenedor correspondiente. En este ejemplo, por lo tanto, afecta a los párrafos 1-1 y 3-1. Este selector también puede ser referenciado desde jQuery, como ves a continuación:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Pseudo clases</title> </head> <body> <div class="contenedor"> <p>Párrafo 1-1</p> </div> <div class="contenedor"> <p>Párrafo 2-1</p> <p>Párrafo 2-2</p> <p>Párrafo 2-3</p> </div> <div class="contenedor"> <p>Párrafo 3-1</p> <span>Esto es un span en el tercer contenedor</span> </div> <div class="contenedor"> <p>Párrafo 4-1</p> <p>Párrafo 4-2</p> <p>Párrafo 4-3</p> </div> <div class="contenedor"> <p>Párrafo 5-1</p> <p>Párrafo 5-2</p> <p>Párrafo 5-3</p> </div> <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script language="javascript"> $('p:only-of-type').css({ "border": "1px solid #0a6301", "background-color": "#9aef92" }); </script> </body> </html> |
LA PSEUDO CLASE :only-child
Este selector es similar al anterior, aunque más restrictivo. Sólo aplica la regla CSS al elemento seleccionado, si es el único hijo de su contenedor padre. En el HTML anterior (el que no tiene jQuery) podemos cargar la siguiente hoja de estilos:
1 2 3 4 |
p:only-child{ border: 1px solid #0a6301; background-color: #9aef92; } |
Como ves si cargas la página, ahora sólo se ve afectado el párrafo 1-1, ya que en el tercer contenedor, aunque sólo hay un elemento p
, no es el único descendiente, ya que también hay un elemento span
.
Por supuesto, este selector, como todas las demás pseudo clases de este artículo, puede ser referenciado directamente desde jQuery.
RESUMEN
PSEUDO CLASES DE UBICACIÓN |
||
SELECTOR | COMENTARIOS | |
:first-child |
Selecciona el elemento referenciado que es el primero del tipo o clase especificado dentro de su contenedor padre. | |
:last-child |
Selecciona el elemento referenciado que es el último del tipo o clase especificado dentro de su contenedor padre. | |
:first-of-type |
Selecciona el elemento referenciado si es el primero del tipo o clase especificado dentro de su contenedor padre. | |
:last-of-type |
Selecciona el elemento referenciado si es el último del tipo o clase especificado dentro de su contenedor padre. | |
:nth-child(n) |
Selecciona el elemento que es el hijo n , si es del tipo o clase referenciado, empezando a contar por el principio de su contenedor padre. |
|
:nth-last-child(n) |
Selecciona el elemento que es el hijo n , si es del tipo o clase referenciado, empezando a contar por el final de su contenedor padre. |
|
:nth-of-type(n) |
Selecciona el elemento n, de los que son del tipo o clase referenciado, empezando a contar por el principio de su contenedor padre. | |
:nth-of-type(odd/even) |
Selecciona los elementos impares (odd ) o pares (even ), de los que son del tipo o clase referenciado, empezando a contar por el principio de su contenedor padre. |
|
:nth-of-type(an + b) |
Selecciona cada a elementos del tipo o clase referenciado, empezando a contar desde b , por el principio del contenedor padre. |
|
:nth-last-of-type(n) |
Selecciona el elemento n, de los que son del tipo o clase referenciado, empezando a contar por el final de su contenedor padre. | |
:nth-last-of-type(odd/even) |
Selecciona los elementos impares (odd ) o pares (even ), de los que son del tipo o clase referenciado, empezando a contar por el final de su contenedor padre. |
|
:nth-last-of-type(an + b) |
Selecciona cada a elementos del tipo o clase referenciado, empezando a contar desde b , por el final del contenedor padre. |
|
:only-of-type |
Selecciona aquellos elementos del tipo o clase referenciado que sean el único de ese tipo o clase dentro de su contenedor padre. | |
:only-child |
Selecciona aquellos elementos del tipo o clase referenciado que sean el único higo dentro de su contenedor padre. |