Q:

Combinators in CSS

everyone! I am quite new to HTML and CSS. I learned about 2 weeks ago. On my final website, I wanted to add a drop-down menu at the top. I want that when I hover over the 'store' tab, the 'shopping cart' tab slides down. I want to do it in only CSS. How do I reference one HTML element from another one from CSS code? What is the difference between > + ~ and other combinators. Sample code:
#store > #shoppingCart{}

A:

In this instance, #store > #shoppingCart{} is a little useless, #shoppingCart should be unique, so you don't need to reference any parents or anything, which is what > essentially does. 
Child Combinator or >
#a > #b means a b element that is a child (but not a grandchild, and so on) of a, eg:
   <div id="a">
     <div id="b"></div>     // selects this element
   </div>

Adjacent Sibling Combinator or +
#a + #b means a b element that comes directly after a in the dom, eg:
   <div id="a"></div>
   <div id="b"></div>       // selects this element

General Sibling Combinator or ~
#a ~ #b is similar to +, but it is any sibling after it in the dom, so the following could work:
   <div id="a"></div>
   <div>
     <a></a>
   </div>
   <div id="b"></div>       // selects this element

However, as for your question, you probably want something like this:
#store:hover ~ #shoppingCart {
  // mouse is hovered over #store and we want to affect a sibling
  // with id #shoppingCart that is "later" in the dom
}

More info on selectors can be found here

A:

In CSS, the symbols you mention are:

> is the the child combinator;
+ is the adjacent sibling combinator;
~ is the general sibling combinator.

The difference between them is this:
#store > .shoppingCart { background-color: red; }
<div class=shoppingCart>This will not be targeted</div>
<div id=store>
  <div class=shoppingCart>This WILL be targeted</div>
  <div class=shoppingCart>This WILL ALSO be targeted</div>
  <div class=inner>
    <div class=shoppingCart>This will not be targeted</div>
  </div>
</div>

<div class=shoppingCart>This will not be targeted either</div>
<div class=shoppingCart>Neither will this</div>

The > combinator selects only direct child elements (elements directly underneath the first one) of the selector specified, so, in this case, only the one immediately underneath #store.
#store + .shoppingCart { background-color: red; }
<div class=shoppingCart>This will not be targeted</div>

<div id=store>
  <div class=shoppingCart>This will not be targeted</div>
  <div class=shoppingCart>This will not be targeted either</div>
  <div class=inner>
    <div class=shoppingCart>This will not be targeted either</div>
  </div>
</div>

<div class=shoppingCart>This WILL be targeted</div>
<div class=shoppingCart>But this one won't be</div>

The + combinator selects an element that is the immediate next sibling (elements that are on the same level, ie. next to one another) of the first element, so if there is a .shoppingCart that is a sibling after a #store, it will be selected - but only if that element is AFTER the first one; a previous sibling cannot be selected in this way.
#store ~ .shoppingCart { background-color: red; }
<div class=shoppingCart>This will not be targeted</div>

<div id=store>
  <div class=shoppingCart>This will not be targeted</div>
  <div class=shoppingCart>This will not be targeted either</div>
  <div class=inner>
    <div class=shoppingCart>This will not be targeted either</div>
  </div>
</div>

<div class=shoppingCart>This WILL be targeted</div>
<div class=shoppingCart>This WILL be targeted as well</div>

The ~ combinator selects an element that is any following sibling of the first element, so if there is a .shoppingCart that follows as a sibling of #store, it will be selected.

