#element1 #element2
means it is only styling the element that has an id of element2
that is inside an element that has an id of element1
If you want to style both elements with the same style then you would need to add a comma between the elements: #element1, #element2
People would use #element1 #element2
say if they wanted to override specific styles for element2
but only if it is in element1
- for example, say element2
is on all your web pages and we have the following styles:
#element2 {width:800px;}
now if you had a particular page where you only wanted it to be 400px wide you could qualify the selector to a higher level to override that element on the certain page - so say we gave the body tag an id of element1
for that specific page, adding
#element1 #element2 {width:400px;}
would mean that element2
would be 400px for that page and then 800px on all other pages