div.classname in css file

Question

I have seen some developers write

HTML:

 some content 

CSS:

Answer 1

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>

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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 { .... }

Answer 6

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.