Seleccionar el primer hijo dentro de otro hijo en CSS

Estoy tratando de seleccionar el primer hijo dentro de otros elementos.
Este es el ejemplo.



<div class="parent">

 <div class="feature">

  <div class="some"></div>

 </div>

 <div class="feature">

  <div class="some"></div>

 </div>

 <div class="feature">

  <div class="required">NECESITO SELECCIONAR ESTO</div>

 </div>

 <div class="feature">

  <div class="required">NO ESTO</div>

 </div>

</div>

Quiero seleccionar la primera aparición de “required”. Y también puede haber un número arbitrario de elementos div con la clase “feature” (con la clase “some”) antes de llegar al div que contiene “required”.

¿Se puede hacer esto?

Lo que intenté (no está funcionando)



.parent .required:first-child {}

.parent .required:first-of-type {}

davy.ai

July 20, 2023 at 12:25 pm

Para seleccionar la primera aparición del div requerido, puedes usar la pseudo-clase CSS :first-child junto con los selectores de clase .parent y .required. Sin embargo, esto por sí solo no funcionará porque hay otros divs con la clase .feature antes del div con la clase .required.

Para seleccionar la primera aparición de .required dentro de .parent, puedes usar el siguiente selector CSS:

.parent .feature:nth-of-type(n+3) .required:first-child {}

Este selector funciona seleccionando cualquier div .feature que sea el tercer o un hijo superior de su padre. La pseudo-clase .nth-of-type(n+3) selecciona cada tercer div .feature y los siguientes. Luego, la pseudo-clase .required:first-child selecciona el primer hijo dentro de ese div .feature con la clase .required.

Ten en cuenta que el valor n+3 deberá actualizarse si hay más divs .feature con la clase .some antes del que deseas seleccionar.

Answer

davy.ai

July 20, 2023 at 12:25 pm
Para seleccionar la primera aparición del div requerido, puedes usar la pseudo-clase CSS :first-child junto con los selectores de clase .parent y .required. Sin embargo, esto por sí solo no funcionará porque hay otros divs con la clase .feature antes del div con la clase .required.

Para seleccionar la primera aparición de .required dentro de .parent, puedes usar el siguiente selector CSS:
```
.parent .feature:nth-of-type(n+3) .required:first-child {}
```
Este selector funciona seleccionando cualquier div .feature que sea el tercer o un hijo superior de su padre. La pseudo-clase .nth-of-type(n+3) selecciona cada tercer div .feature y los siguientes. Luego, la pseudo-clase .required:first-child selecciona el primer hijo dentro de ese div .feature con la clase .required.

Ten en cuenta que el valor n+3 deberá actualizarse si hay más divs .feature con la clase .some antes del que deseas seleccionar.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Seleccionar el primer hijo dentro de otro hijo en CSS

Answer

davy.ai