Question: I want to show the popup when I hover over a cell

```
.cell:hover + .popup {
  display: block;
}

```

But this is not working. It is only working when I hover over the hole table. Can you explain me why? This is strange for me because both are classes. I do not want to use javascript.

```css
.table{
    margin:auto;
    display:table;
    width:800px;
    background-color:lightblue;
    border-collapse:collapse;
}

.row
{
    display:table-row;
}

.cell
{
    display:table-cell;
    height: 20px;
    padding: 4px;
    border:1px solid black;
}

.cell:hover {
    background-color: #ff0000;
}

.popup {
    display: none;
}

.table:hover + .popup {
    display: block;
}
```

```html
<div class="table">
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
  </div>
</div>

<div class="popup">Stuff shown on hover</div>
```

Answer: 
You're using the [adjacent sibling selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors), `+`. Since `.popup` is not a sibling of any `.cell`, nothing will happen.

Now, your other rule, `.table:hover + .popup` works because the popup element is a sibling of your table. If you want the cell hover to work *without changing your HTML*, you'll have to use JavaScript - [there are no parent selectors in CSS](https://css-tricks.com/parent-selectors-in-css/).
@chazsolo is right about the sibling selector. However, you can still do it without JavaScript by moving the `.popup` class `div` inside the `.row` class `div` so that it IS a sibling of the `.cell` elements, then use CSS to position the popup wherever you want it on the screen. For example, something like:

```
.popup {
  display: none;
  position: fixed;
  top: 30%;
}

```

As @chazsolo suggested, you would also need to switch from using the `+` sibling selector to using the `~` sibling selector, so the popup can be activated by hovering over any of the `.cell` elements.