CODEWITHSUNDEEP
css
Mike Lacy
Mike Lacy

Reputation: 1

Why do people use div.border in a css file insead of just .border?

I was wondering why some css files use div.border instead of .border to list a sector in CSS. I have seen it used for multiple sectors like div.footer {color:#000000;} instead of just .footer {color:#000000;}

Thanks for any help.

Upvotes: 0

Views: 115

Answers (5)

steveax
steveax

Reputation: 17743

There are 3 reasons you might want to specify the element:

  1. You are applying the class to multiple types of elements and need to add to or override the rules for particular elements.

  2. You wish to provide contextual information in the style sheet (usually for other developers)

  3. You need extra specificity to override a style rule from another class.

In general I think #1 is a bad idea except for some utility classes (like floats or clears) and I think that sort of thing is better handled by using a preprocessor like Saas with mixins

The second case I think is of dubious value. If you run into the third case (much like sprinkling in !important), you may want to refactor things to avoid having to do this. In any event be aware that if they aren't needed adding elements to the selector just slows matching down

Upvotes: 2

Rob
Rob

Reputation: 406

As has been said, prepending the div element to the footer class will ensure that the styles are only applied to divs with class 'footer', and not other elements with class 'footer'.

Ideally you would just use .footer if you know for sure you will only use the class on one particular DOM element. Prepending the class with a DOM element is not necessary and has a negative effect on rendering performance (OK, it doesn't have much effect in reality, but it's still inefficient).

Upvotes: 1

Jeremy Anderson
Jeremy Anderson

Reputation: 825

If you want the .border class rules you are writing to apply only to div containers, as opposed to table containers or other elements, that's how you do it. There are many good articles on CSS selectors, of which this is but one.

Upvotes: 1

Roddy of the Frozen Peas
Roddy of the Frozen Peas

Reputation: 15219

Consider the difference between <div class="border">Div with border</div> and <p class="border">Paragraph with border</p>. The style of .border { ... } would affect both of these, while div.border{ ... } would only affect the div.

Upvotes: 1

mikepr
mikepr

Reputation: 673

The presence of the "div" before the dot means that the selector only applies to DOM elements of the type div.

So, for instance, if you have a class called "foo", 

.foo {
    color:#ff0000;
}

It would make the text inside of red. Using div.foo would cause the directives only to apply to divs of that class.

Upvotes: 1

Related Questions