CODEWITHSUNDEEP
csscss-selectors
pylonicon
pylonicon

Reputation:

What is the purpose of the 'div' selector and why do so many developers use it in their style sheets?

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

Upvotes: 10

Views: 5182

Answers (5)

babtek
babtek

Reputation: 944

div.foo { rule }
div#bar { rule }

This means the rule only applies to div elements with class foo or id bar, and the rule would not apply to non-div elements with class foo or id bar.

.foo div { rule }
#bar div { rule }

This means the rule applies to all div elements inside any element with class foo or id bar. This is called a descendant selector.

#foo div span { rule }
#foo div p { rule }

When a div selector appears after an id or class, it is not required to have another selector after it. If there is such a selector, the rule will apply to the selected elements only if they are inside a div element which is inside an element having id foo.

You may want to read up on your selectors here:

http://www.w3.org/TR/CSS2/selector.html

Upvotes: 1

meder omuraliev
meder omuraliev

Reputation: 186562

  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.

Upvotes: 11

Paul Schreiber
Paul Schreiber

Reputation: 12589

In HTML and XHTML, <div> and <span> are generic container elements. <div> is a block-level element. <span> is an inline element.

Most other elements (<h1>, <p>, <strong>, etc.) have specific semantic meanings. It's bad practice to use, say, a <p> element for something that's not a paragraph. But <div> is just a container.

If you need something to be purely decorative, or to group related elements, <div> is a good choice.

Upvotes: 2

Andy Lin
Andy Lin

Reputation: 545

div.form-item-info{...} // all div elements that have class~=form-item-info

.form-item-info{...}  // all elements that have class~=form-item-info

Upvotes: 4

George Marian
George Marian

Reputation: 2669

The tag defines a division or a section in an HTML document.

The tag is often used to group block-elements to format them with styles.

http://www.w3schools.com/tags/tag_div.asp

They're just being explicit about their selectors, which tends to be a good thing, as you're being more specific when addressing the elements to be styled. (Smaller chance of conflicts and unintended styling.)

Upvotes: 1

Related Questions