How to target and assign specific child elements when the child elements only render on a onClick event

user_11920187 0
Viewed 110

I have two selectfield dropdowns that I made that are wrapped under a parent container. They both have dropdowns that have the same classnames so I decided to use the ':nth-child' selector to target either the first or second child.

    .select-field {

       .dropdown-list {

          &:nth-child(1) {
            top: 342px;
          }

          &:nth-child(2) {
            top: 404px;
          }
       }
    }

However it's applying the ':nth-child(2)' style for both children. I realized this might be the case because only one or the other dropdown list is rendered in the DOM when only one of the select field dropdowns is clicked. So if I click on the first select field, the dropdown for the first select field is seen in the DOM but the dropdown for the second select field is not which is understandable. So I think it only recognizes one child.

If first selectfield is clicked and vice versa:

<div class="container">
 <div class="select-field">
  <div class="dropdown-list">
   <ul>
     <li></li>
     <li></li>
   </ul>
  </div>
  </div>
 <div class="select-field">
 *other dropdown is not rendered*
 </div>
</div>

Is there a way for me to apply these styles considering these dropdown list are dependent on an event?

sass html javascript
1 Answers

As @somethinghere pointed out you need to target the select-field with :nth-child selector:

.select-field {
  &:nth-child(1) .dropdown-list {
    top: 342px;
    border: 2px dashed black; 
  }
  
  &:nth-child(2) .dropdown-list {
    top: 404px;
    border: 2px dashed gold;
  }
}
user_16938590
Related