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

En este artículo, veremos cómo establecer estilos incluso en elementos secundarios del elemento principal usando jQuery. Para establecer el estilo en el hijo par del padre, usamos el selector jQuery :nth-child(even).

El selector :n-th-child(even) se usa para seleccionar cada elemento que es el hijo par de su elemento padre.

Sintaxis:

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

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 pares 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(even)").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 even 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 *