Question

Looking through style sheets from popular & unpopular websites I have found the div selector included in them. The bottom four examples were taken from the style sheets of the popular sites Stack Overflow, Github, Youtube & Twitter:

div.form-item-info{padding:4px 0 4px 4px;width:80%;color:#777;}


.searchFooterBox div span.smallLabel{font-size:14px}


#readme.rst div.align-right{text-align:left;}


.hentry .actions>div.follow-actions{visibility:visible;text-align:left;}

I find that I can design fully functioning CSS style sheets with out using the div selector so the question is:

What is the div selector’s function?
&
Why do so many developers use it?

EDIT:

To be clear, when using the div selector, what does it mean when div appears before an id or class?
For example:

div.foo { color:black; }
div#bar { color:gray; }

And what does it mean when div appears after an id or class?
For example:

.foo div { color:black; }
#bar div { color:gray; }

When the div selector appears after an id or class does it have to have another selector appear after it?
For example:

#foo div span { color:black; }
#foo div p { color:black; }

Answer 1

1. Being more explicit in your selector makes it easier to remember what the HTML structure is like. Months down the line I can read the CSS and based on my explicit rules I can automatically map the structure in my head without going back to the HTML.
2. By specifying the node name before the class or ID, the rule becomes more specific. If you want to override .foo { color:black; } for a div that has a class of foo, just do div.foo { color:red; }. Paragraphs that have a class of foo would be black, while divs would be red.
3. It can be useful if you want to serve different css rules based on HTML structure. In the rules below, Any span inside a div is red. Any direct span under #foo is blue.

CSS:

#foo div span { color:red; }
#foo span { color:blue; }

html for that:

<div id="foo"><span>blah</span> <div><span>blah</span></div> </div> 

Live demo that you can play around with: http://jsfiddle.net/6dw2r/

EDIT:

1. div#foo matches a div with an id of foo.
2. div#foo div means any div descendants of #foo.
3. No. It doesn’t.

Please read http://www.w3.org/TR/CSS2/selector.html#pattern-matching for further questions.