CSS Selectors - difference between and when to use ">", "+" or " "

When using CSS, I can query elements in the following ways:

div > .class  
div .class 
div + .class 

However I can't quite tell the exact difference between each of these DOM queries. Do they all point to child elements? I know that ">" and " " (space) do.

But under what circumstances would I use each?

Answer

In CSS these are called Combinators and means three different things:

1. div > .class: is called Child selector and will select all elements that are direct children of a div and have the class .class.




2. div .class: is called Descendant selectors and will select all elements inside a div and having the class .class.





3. div + .class: is called Adjacent sibling selector and will match any element that immediately follows a div and have the class .class.

Example:

In the following example:

  

    

      Testing link
    
  
  A span

A title

• div > .test will match only

  and elements.




• div .test will match

  , , and elements.



• div + .test will match only

  element because it follows the

  immediately.

Demo:

div .test {
  background: yellow;

}

div>.test {
  background: red;
}

div+.test {
  background: green;
}

  

    Pragraph
    
      link
    
  
  Span

Title