El :nth-of-type() en css Selector se usa para diseñar solo aquellos elementos que son el enésimo número de elementos secundarios de su elemento principal. Una n puede ser un número, una palabra clave o una fórmula.
Sintaxis:
:nth-of-type(number) { // CSS Property; }
Donde número es el argumento que representa el patrón para elementos coincidentes. Puede ser impar, par o en notación funcional.
- impar: Representa elementos cuya posición es impar en una serie: 1, 3, 5, etc., contando desde el final.
- par: Representa los elementos cuya posición es par en una serie: 2, 4, 6, etc., contando desde el final.
- notación funcional(): Representa elementos cuya posición de hermanos coincide con el patrón An+B, para todo entero positivo o valor cero de n. El índice del primer elemento, contando desde el final, es 1.
Ejemplo 1:
<!DOCTYPE html> <html> <head> <style> h1 { color: green; font-size: 35px; } p:nth-of-type(2) { background: green; color: white; font-weight: bold; width: 70%; } </style> </head> <body> <center> <h1>GeeksForGeeks</h1> <h2>:nth-of-type() Selector </h2> <p class="geeksFORGEEKS">geeksforgeeks</div> <p class="forgeeks">A computer science portal for geeks.</div> <p class="geeks">Sudo placement.</p> <p class="SUDO">GFG STANDS FOR GEEKSFORGEEKS.</p> </body> </html>
Producción :
- safari de manzana
- Google Chrome
- Firefox
- Ópera
- explorador de Internet
Ejemplo-2: En este ejemplo, cada elemento par e impar se selecciona utilizando la palabra clave par o impar como argumento.
<!DOCTYPE html> < html > < head > < style > h1 { color: green; font-size: 35px; } p:nth-of-type(odd) { background: green; color: white; font-weight: bold; width: 70%; } p:nth-of-type(even) { background: red; color: white; font-weight: bold; width: 70%; } </ style > </ head > < body > < center > < h1 >GeeksForGeeks</ h1 > < h2 >:nth-of-type() Selector </ h2 > < p class = "geeksFORGEEKS" >geeksforgeeks</ div > < p class = "forgeeks" >A computer science portal for geeks.</ div > < p class = "geeks" >Sudo placement.</ p > < p class = "SUDO" >GFG STANDS FOR GEEKSFORGEEKS.</ p > </ body > </ html > |
producción:
Navegadores compatibles: los navegadores compatibles con :nth-of-type() Selector se enumeran a continuación:
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA