CODEWITHSUNDEEP
htmlcss
maruan
maruan

Reputation: 67

If element is shown, hide another in CSS

I have two dropdowns, is there a way to make a if statement for them using only CSS?
Example of what I'm trying to do:

if dropdown1 has display:block then dropdown2 will be forced to have display:none

Upvotes: 0

Views: 73

Answers (1)

4D_Liam
4D_Liam

Reputation: 71

Not the most clear question, not the most elegant answer but definitely possible.

#dropdown-1.d-block ~ #dropdown-2 {
  display: none;
}

.d-block {
  display: block;
}
<select id="dropdown-1" class="d-block">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

<select id="dropdown-2">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Upvotes: 3

Related Questions