Why use class AND element type in a CSS selector?

Question

I am curious to know the usage of the div.something in CSS. I have seen this around the Internet but don't know what it really means when people use div. following by some class without gaps. What is it?

div.report {
    background:pink;
}

This seems the same thing like .report { .. } so why would some one use div.report

Alexander O'Mara · Accepted Answer · 2014-01-04 23:38:07Z

3

div.report means that only div elements with the class of report will be selected. .report on the other-hand will select any element with report class, be it a div, p, span, etc.

Additionally, div.report is more specific than .report, so properties in the former will override properties in the later.

answered Jan 4, 2014 at 23:38

Alexander O'Mara

60.9k19 gold badges176 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jason Sperske Over a year ago

This answer adds an important extra detail about specificity.

Jason Sperske · Accepted Answer · 2014-01-04 23:38:02Z

1

This CSS rule matches div elements with the class report. If you omitted the div then it would match any element with the class report.

answered Jan 4, 2014 at 23:38

Jason Sperske

30.5k8 gold badges77 silver badges127 bronze badges

1 Comment

Ali Gajani Over a year ago

Right, I get it. It makes sense. Thanks.

SLaks · Accepted Answer · 2014-01-04 23:38:09Z

1

In case you also have <span class="report">.

Or, simply to clarify to people reading the CSS what elements will have that class.

answered Jan 4, 2014 at 23:38

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Collectives™ on Stack Overflow

Why use class AND element type in a CSS selector?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related