¿Cómo aplicar CSS en niños impares del Node principal usando jQuery?

En este artículo, veremos cómo establecer estilos en el hijo impar del elemento padre usando jQuery. Para establecer el estilo en el hijo impar del padre, usamos el selector jQuery :nth-child(odd).

El selector :nth-child(odd) se usa para seleccionar cada elemento que es el hijo impar de su elemento padre.

Sintaxis:

$("Selector:nth-child(odd)")

Enfoque: Primero, creamos un elemento HTML que contiene un elemento div. Este elemento div contiene algún elemento de párrafo, luego usamos el selector :nth-child() para seleccionar todas las posiciones impares secundarias del elemento principal.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
  
    <style>
        div {
            font-size: 18px;
            font-weight: bold;
        }
          
        p {
            margin-left: 50px;
        }
    </style>
  
    <script>
        $(document).ready(function() {
            $("p:nth-child(odd)").css({
                backgroundColor: "green",
                color: "white",
                padding: "5px 15px",
                display: "table"
            });
        });
    </script>
</head>
  
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
  
    <h3>
        How to apply CSS in odd childs of parent 
        node using jQuery library?
    </h3>
  
    <div>
        <p>Data Structure</p>
        <p>C++ Programming</p>
        <p>javaScript</p>
        <p>Web Technology</p>
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por vkash8574 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *