A demonstration of combination
CSS selector combinators are used when you need to refer to elements via their relationship to other elements. Possible relationships are descendants, children and siblings.
Below you can see the combinator syntax as well as what they do. There are a couple more relevant pseudo-classes that I didn’t include.
                
                #parent
                
            
                    Parent
                    
                
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                Grandchild
                        Grandchild
                        Grandchild
                    Sibling
                Sibling
                Sibling
            
                
                #parent div
                
            
                    Parent
                    
                
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                Grandchild
                        Grandchild
                        Grandchild
                    Sibling
                Sibling
                Sibling
            
                
                #parent > div
                
            
                    Parent
                    
                
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                Grandchild
                        Grandchild
                        Grandchild
                    Sibling
                Sibling
                Sibling
            
                
                #parent + div
                
            
                    Parent
                    
                
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                Grandchild
                        Grandchild
                        Grandchild
                    Sibling
                Sibling
                Sibling
            
                
                #parent ~ div
                
            
                    Parent
                    
                
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                Grandchild
                        Grandchild
                        Grandchild
                    Sibling
                Sibling
                Sibling
            
                
                #parent > div:first-child
                
            
                    Parent
                    
                
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                Grandchild
                        Grandchild
                        Grandchild
                    Sibling
                Sibling
                Sibling
            
                
                #parent > div:nth-child(3)
                
            
                    Parent
                    
                
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                Grandchild
                        Grandchild
                        Grandchild
                    Sibling
                Sibling
                Sibling
            
                
                #parent > div:nth-child(odd)
                
            
                    Parent
                    
                
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                Grandchild
                        Grandchild
                        Grandchild
                    Sibling
                Sibling
                Sibling
            
                
                #parent div:not(.child)
                
            
            
                    Parent
                    
                
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                    Grandchild
                        Grandchild
                        Grandchild
                    
                        Child
                        
                Grandchild
                        Grandchild
                        Grandchild
                    Sibling
                Sibling
                Sibling
            If you need to support really old versions of Internet Explorer you have to be careful. IE 6.0 or older does not support CSS 2.1 selectors while IE 8.0 or older does not support CSS3 selectors.