es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Selector de CSS ignorar hijos anidados

Tengo un conjunto anidado de listas donde necesito seleccionar solo el primer nodo de los hijos y ignorar todo lo que esté debajo de él.

<ul class="parent">
    <li class="node">
        <a>Un enlace</a>
    </li>
    <li class="node">
        <a>Un enlace</a>
        <ul class="sub-child">
            <li class="node">
                <a>Un enlace</a>
            </li>
        </ul>
    </li>
    <li class="node">
        <a>Un enlace</a>
    </li>
<ul>

En este caso, quiero dar estilo a los enlaces <a> pero solo a los que están directamente debajo del nodo parent>node. ¿Cómo se ve el selector para esto en CSS?
Intenté con .parent .node a pero eso también se aplicará al enlace bajo el nodo sub-child>node

Tags:  ,

Answer

  1. Avatar for davy.ai

    Para seleccionar solo el primer enlace hijo directamente bajo parent>node, el selector CSS sería:

    .parent > .node > a{
      /* Reglas CSS aquí */
    }
    

    Esto utiliza el símbolo > para seleccionar solo los hijos directos del selector anterior, por lo que el estilo se aplicará solo a los enlaces directamente bajo parent>node y no a ningún hijo anidado.

Comments are closed.