CODEWITHSUNDEEP
htmlcsscss-selectors
Nicholas Adamou
Nicholas Adamou

Reputation: 741

How do I select a div that is not a child of the parent div but is outside the parent div?

I am trying to select the div with the class nav to change the display property to block when the user hovers over the hamburger div.

I've scaffold the internet and saw that some have said that you can achieve this if you use the :not(insert_container_name_here) pseudo-class, however, it does not seem to be working.

The one requirement is that I cannot use Javascript.

Below is my attempt at solving this problem:

.nav {
  display: none;
  padding: 15px;

  background: red;
}

.hamburger {
  margin: 0;
  padding: 15px; 
  text-align: left;
}

.hamburger:hover .hamburger:not(.hamburger) > .nav {
  display: block;
}

.hamburger > .toggle-btn {
  color: black;
  text-decoration: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="hamburger">
  <a href="#" class="toggle-btn"><i class="fa fa-bars"></i></a>
</div>

<div class="nav">
  <p>Display</p>
</div>

Upvotes: 2

Views: 60

Answers (2)

Asons
Asons

Reputation: 87191

By using the general sibling selector ~ you will be able to target the nav even if you decide to add other elements between the two.

.hamburger:hover ~ .nav {
  display: block;
}

Sample snippet

.nav {
  display: none;
  padding: 15px;
  background: red;
}
.hamburger {
  margin: 0;
  padding: 15px; 
  text-align: left;
}
.hamburger:hover ~ .nav {
  display: block;
}
.hamburger > .toggle-btn {
  color: black;
  text-decoration: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="hamburger">
  <a href="#" class="toggle-btn"><i class="fa fa-bars"></i></a>
</div>

<div class="nav">
  <p>Display</p>
</div>

Upvotes: 1

kukkuz
kukkuz

Reputation: 42352

Use the + adjacent sibling selector like this:

.hamburger:hover + .nav {
  display: block;
}

See demo below:

.nav {
  display: none;
  padding: 15px;
  background: red;
}
.hamburger {
  margin: 0;
  padding: 15px;
  text-align: left;
}
.hamburger:hover + .nav {
  display: block;
}
.hamburger > .toggle-btn {
  color: black;
  text-decoration: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="hamburger">
  <a href="#" class="toggle-btn"><i class="fa fa-bars"></i></a>
</div>

<div class="nav">
  <p>Display</p>
</div>

Upvotes: 4

Related Questions