El selector:nth-child() en CSS se usa para hacer coincidir los elementos en función de su posición en un grupo de hermanos. Coincide con cada elemento que es el n-ésimo hijo. La pseudoclase: par y: impar se utiliza con la lista de elementos, como párrafos, elementos de artículos, que es básicamente un contenido de lista.
- impar: el uso de una pseudoclase impar en cualquier elemento de la lista que afectará solo a la lista de números de índice impares.
Sintaxis:
li:nth-child( odd ) {
// CSS Property
}
- Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS :nth-child(odd) Selector
</title>
<!-- Style to uses :nth-child(odd)
Selector -->
<style>
li:nth-child(odd) {
background: green;
font-size: 24px;
color:white;
}
</style>
</head>
<body>
<li>GeeksforGeeks</li>
<li>A Computer Science portal</li>
<li>Welcome to GeeksforGeeks</li>
</body>
</html>
- Producción:
- par: El uso de una pseudoclase par en cualquier elemento de la lista que afectará solo a la lista de números de índice pares.
Sintaxis:
li:nth-child( even ) {
// CSS Property
}
- Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS :nth-child(even) Selector
</title>
<!-- Style to uses :nth-child(odd)
Selector -->
<style>
li:nth-child(even) {
background: green;
font-size: 24px;
color:white;
}
</style>
</head>
<body>
<li>GeeksforGeeks</li>
<li>A Computer Science portal</li>
<li>Welcome to GeeksforGeeks</li>
</body>
</html>
- Producción:
- Ejemplo: este ejemplo utiliza tanto el selector de pseudoclase :par como el :odd.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
li:nth-child(odd) {
background: green;
font-size: 36px;
color:white;
}
li:nth-child(even) {
background: Blue;
font-size: 36px;
color:yellow;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>:even and :odd pseudo-class</h2>
<li>Data Structure</li>
<li>Operating System</li>
<li>Computer Networks</li>
<li>C Programming</li>
</body>
</html>
- Producción:
Navegadores compatibles:
- Google Chrome 4.0
- Internet Explorer 9.0
- Firefox 3.5
- Ópera 9.6
- Safari 3.2
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA