div.classname in css file

I have seen some developers write

HTML:

<div class="test"> some content </div>

CSS:

div.test {
  width:100px.
}

What is the purpose of doing div.className instead of just .className.

Does this mean this style will be applied only when the class is applied to a div.

So, <span class='test'>content</span> will have no effect of 'test' with the css above? If that is the case, is that best practice? This is almost like style overriding f开发者_如何学JAVAor different type of elements, mixing styles with rules!

To really answer your question, though, I first have to answer a couple of other questions. Because, as you will see, it's all about context.

• What is the point of HTML?
• What is a div?
• How is it different from other HTML elements?
• And what does it mean when a element has a class (or collection of classes)?

I'll give you my opinion on the answers to those question, and then we can have a meaningful discussion on best-practices.

What is the point of HTML?

The point of HTML is to add context to your data. Text, all by itself, can be a very powerful thing. Since the invention of the printing press, it has served humanity very well as an extremely powerful communication tool. Take the following document for example:

My shopping list
Bread
Milk
Eggs
Bacon

Even with this simple text document, most people can dechiper the intent of the writer; its a shopping list. There is a heading, and a collection of list items that need to be purchased.

So whats the point of HTML then, if simple text documents are enough?

Fair question. If text is enough to communicate, then why do we need HTML?

The reader of the document attempts to parse the information they get. That process is embedded with a ton of cultural tricks and learned patterns that are used to reconstruct the original intent. It is trivial for most people with a basic understanding of english to determine the meaning of the document. However, as the complexity of the document increases (or the familiarity of the reader with the context decreases), then it becomes more and more difficult to parse correctly. Assumptions are made; context becomes unclear. Eventually, the reader's ability to accurately decode the message falls apart, and the message is indechiperable.

This is the space where HTML exists. It is desinged to wrap around data, providing context and meaning. So even if you (or the computer) are unable to process the actual information, you can understand the context in which it should be. For example, the same document with HTML:

<h1>My shopping list</h1>
<ul>
    <li>Bread</li>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bacon</li>
</ul>

Now, even if we weren't able to understand the actual data, we have a contextual backdrop to interpret the data. We have a heading and an unordered list with a collection of list items.

<h1>Xasdk bop boop</h1>
<ul>
    <li>Zorch</li>
    <li>Quach</li>
    <li>Iach</li>
    <li>Xeru</li>
</ul>

I have no idea what that means, but at least I know there is a heading and an unordered list. That is the way the browser sees your HTML document: some data, wrapped in context.

What is a div? How is it different from other HTML elements?

HTML elements define context; they describe the content they wrap around. HTML shouldn't alter or change the meaning of the data, it simply augments it and defines relationships between the data: parent, child, sibling, ancestor... So a li element describes a list item. An h1 element describes a heading. A table element describes a table, and so on.

So, what is a div then? Well, a div is a block-level HTML element that has no context of its own. By itself, it doesn't mean anything (other than the fact that it is a block).

While most other HTML elements (with the exception of the span element) have some kind of explicit context, the div element does not. That is a huge difference. It's a blank box. It's a box that doesn't mean anything. When you put something in a 'div', you are saying that its in a box, but that box doesn't really mean much.

So what is the point of a div then?

The div tag provides a blank slate for you to define your own context. Back to our shopping list example: right now, there is a weak relationship between the unordered list and the heading. They are weakly associated siblings, they just happen to be next to each other, but nothing really binds them together as a unit. What we would really like to say is:

<grocery_list>
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</grocery_list>

But we can't do that within the confines of the HTML spec. But what we can do is stick them in a 'box':

<div>
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</div>

What does it mean when an element has a class (or collection of classes)?

But, again, that box doesn't mean that much right now. What we really would like to do is give that box some context of our own. We want to invent our own element. Thats where the class attribute comes into play. While HTML elements augment data, HTML attributes augment elements. We can say:

<div class="shopping_list">
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</div>

So we are saying that our div is really a shopping_list. That shopping_list has a heading, and an unordered list of items. HTML is supposed to make your data more clear, not less clear.

So, finally, how does this all relate to your question?

When you are writing CSS, you are leveraging your context (elements, classes, ids, and the relationship between elements) to define style.

So back to the shopping list example. I could write a style that said:

<style>
    ul {
        background-color: red;
    }
</style>

But what am I really saying? I'm saying: "All unordered lists should have a background color of red". And the question is: Is that really what I mean? When writing CSS you should keep your structure in mind. Is it right to say all div elements should look a particular way, or give only divs a specific class? For example, I would aruge that this might be better:

div.shopping_list h1 { font-weight: bold; font-size: 2em; border-bottom: 1px solid black; }
div.shopping_list ul li { 
    margin-bottom: 1ex;
}

Here, I am saying that these elements, in this particular context should look this particular way.

So in your example, what does a div with a class of test really mean? What is the content? What context are you trying to clarify? That will tell you what your style selectors should look like.

For example:

<div class="shopping_list important">
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</div>

<table class="budget">
    <tbody>
        <tr class="important">
            <td>Account Balance</td><td>$0.00</td>
        </tr>
            </tbody>
</table>

Is a CSS selector of .important a good idea? Is an "important shopping list" the same thing as an "important table row in a budget table?"

And only you can answer that, depending on what your data is and how you have decided to mark up that data.

There are a bunch of technical topics to get into about CSS specificty, like good practices for maintaining complex style sheets and complex associations between elements, but ultimately it all boils down to answering these questions:

1. What am I trying to communicate? (Data/Content)
2. What context is the data in? (HTML)
3. What should that look like? (CSS)

Once you can answer those questions, everything else will start to fall into place.

You are correct. div.className has a higher specificity than .className . This means a couple things:

1. Only divs with className will receive the styles, other elements will not
2. The css for div.className will override other css rules with less specificity, like just .otherClassName

It's exactly as you said style will be applied only when the class is applied to a div. It will not be available for any other type of element.

It's best practice to do this when you have a class that is only ever applied to a div.

Though if another class exists as .test it will be overrun by any styling done within div.test when applied to a div with test class.

you can apply classes to multiple dom elements, so doing div.classname would allow you to select only div elements with that class instead of all dom elements with that class

Exactly.

This is from the W3C spec:

For example, we can assign style information to all elements with class~="pastoral" as follows:

*.pastoral { color: green }  /* all elements with class~=pastoral */
or just .pastoral { color: green }  /* all elements with class~=pastoral */ 

The following assigns style only to H1 elements with class~="pastoral":

H1.pastoral { color: green }  /* H1 elements with class~=pastoral */

Given these rules, the first H1 instance below would not have green text, while the second would:

<H1>Not green</H1> <H1 class="pastoral">Very green</H1>

The div.test selector will enforce the style rule is only applied to div elements with the test class.

Does this mean this style will be applied only when the class is applied to a div ?
Yes

The previous rule will not in deed have any effect on span

The reason for such choice depends on the context. In general, any css style is to focus on a particular element on a given page otherwise you will have

div { .... }

It is a matter of style. ;)

It will only be applied to div elements. Some people like narrowing the scope as much as possible to help reduce maintenance in the future, while other people find that having it more open is easier to maintain. It's mostly a matter of personal preference for the most part.

That's exactly what it means. It's not good or bad practice, it depends completely on what elements you want specific classes to apply too. Sometimes you want a class to apply to all elements, other times you want the class to have different effects based on the element, such as having both span.test and div.test defined in the CSS.

Prefixing a class with an element name confines that set of styles to the specified element type.

.test { font-weight:bold; }
span.test { color:#fff; }
div.test { color:#000; }

In this case, all elements using the class will be bold, the font for SPANS will be white, and the font for DIVS will be black.

the style will be applied only when the class is applied to a div ?

there are some performance implications too.. here is the performance counter

• IDs are the fastest
• Tag names are next fastest
• Class names with no tag name are the slowest

As for which one to use, use whichever is most appropriate. If you have a search box on your page then using an ID for that would be most appropriate because there's only one search box. Table rows on the other hand will probably be identified by class because there is (or can be) more than one.

something that most ppl dnt pay attention to is semantics while naming a class.. read this blog for some nice tips: http://css-tricks.com/13423-semantic-class-names/

Sorry I wanted to add One important thing to remember about how browsers read your CSS selectors, is that they read them from right to left. That means that in the selector ul > li a.home the first thing thing interpreted is a.home so avoid making such mistakes

Besides maintenance and personal preferences, there are specification-points within a CSS selector. Always good to know about.

div = 1 point
.className = 10 points
div.className = 1+10 points

The selector with the most points win. With this in Mind you can go from very general to specific styles.