Combinators in CSS

Question

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{}

Andy · Answer 1 · 2013-06-24T14:51:13.350

3

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

edited Jun 24 '13 at 14:51

answered Jun 24 '13 at 14:40

Andy

14,427
3
52
76

Do note that for both `+` and `~`, the selection only works in a downstream manner, i.e. `#a + #b` only works when the HTML is `
` and not `
` ;)
– Terry Jun 24 '13 at 14:42
Your first definition is a bit misleading - immediate or not, the child combinator selects a *child* of a given element. – Adrift Jun 24 '13 at 14:49
@Adrift What word or phrase would you suggest? – Andy Jun 24 '13 at 14:50
None, just remove the word immediate. – Adrift Jun 24 '13 at 14:50

Adam Hepton · Accepted Answer · 2013-06-26T07:33:48.260

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.

Your definitions of `+` and `~` are not quite correct: both only target siblings that come *after* the element selected by the first part of the combinator; the difference between the two is that `+` only selects the immediate next element (if it matches) whereas `~` selects any next elements (immediate or otherwise). There are no combinators to select arbitrary (previous or next) kinds of siblings. — Raphael Schweikert, Jun 24 '13 at 14:58
You're absolutely right, of course. I don't know what I was thinking. Thanks. — Adam Hepton, Jun 26 '13 at 07:34

Marvin Emil Brach · Answer 3 · 2013-06-24T14:40:03.980

0

E > F -> Matches any F element that is a child of an element E.
E + F -> Matches any F element immediately preceded by a sibling element E.
E ~ F -> an F element preceded by an E element

You will find the full specification for CSS selectors here: http://www.w3.org/TR/css3-selectors/

Additional learning resource: http://css.maxdesign.com.au/selectutorial/

edited Jun 24 '13 at 14:40

answered Jun 24 '13 at 14:34

Marvin Emil Brach

3,984
1
32
62

2

`E[foo~="warning"]` That's not a combinator. The latest specification can be found here: http://www.w3.org/TR/css3-selectors where you can find a `~` combinator. – BoltClock Jun 24 '13 at 14:38

score 0 · Answer 4 · answered Jun 24 '13 at 14:35

This is the link you are probably looking for: http://www.w3schools.com/cssref/css_selectors.asp

Let's do a few examples:

#store > #shoppingCart {

   //code

}

This will select all elements that have the ID shopping cart and have a parent of ID store.

Another example:

p~ul {

    //code

}

Selects every ul element that are preceded by a p element

Combinators in CSS

4 Answers4