What does this css selector do?

Question

I spotted this (to me) curious css style in the default Site.css file of an ASP.NET MVC project:

.text-box.multi-line
{
    height: 6.5em;
}

Is .text-box.multi-line just the name of a class that happens to have a dot in the middle of it, or is this a nesting of two classes? Or is it something else entirely? Can you explain?

And can you provide a usage example?

Edit

Thanks for all the answers. This seems to be an omission from the w3schools css reference page.

Regarding the omission.. it's not surprising, see: w3fools.com — thirtydot
– thirtydot, Commented Jun 10, 2011 at 20:29
thank you @thirtydot, wasnt aware there was so much against w3schools, i was personally, but nice to know there are a lot of others — Ascherer
– Ascherer, Commented Jun 10, 2011 at 20:45
@thirydot, thanks for that link. Interestingly, HTML Dog (one of the recommended sites) doesn't have what I was looking for either :( — devuxer
– devuxer, Commented Jun 10, 2011 at 20:45
@DanM: Try SitePoint: reference.sitepoint.com/css/classselector that page discusses div.foo.bar. — thirtydot
– thirtydot, Commented Jun 10, 2011 at 20:50
@DanM sitepoint reference does :) @thirtydot great minds think alike. — Raynos
– Raynos, Commented Jun 10, 2011 at 20:51

Erik · Accepted Answer · 2011-06-10 20:16:19Z

5

it matches an item with both classes, ie.

<textarea class="text-box multi-line"></textarea>

It will not match if the item only has 1 of the classes. It will match if the item has those two classes plus additional ones.

answered Jun 10, 2011 at 20:16

Erik

20.7k8 gold badges47 silver badges77 bronze badges

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

Comments

No Results Found · Accepted Answer · 2011-06-10 20:16:08Z

3

It means that the element has both classes.

It will select an element with the class text-box that also has the class multi-line

This would be the same:

.multi-line.text-box {}
.text-box[class~="multi-line"] {}

An example:

<p class="multi-line text-box some-other-class"></p>

answered Jun 10, 2011 at 20:16

No Results Found

103k38 gold badges199 silver badges232 bronze badges

Comments

thirtydot · Accepted Answer · 2011-06-10 20:16:47Z

3

It's selecting an element like this:

<* class="text-box multi-line"></*>

Any element that has both the text-box and multi-line classes.

answered Jun 10, 2011 at 20:16

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Comments

Bryan A · Accepted Answer · 2011-06-10 20:16:31Z

2

It will select this element:

<textarea class="text-box multi-line" />

Or any element with both the text-box and multi-line classes for that matter.

answered Jun 10, 2011 at 20:16

Bryan A

3,6341 gold badge26 silver badges29 bronze badges

Comments

Patricia · Accepted Answer · 2011-06-10 20:20:08Z

2

Here's a quick little fiddle to show the difference:

http://jsfiddle.net/sGn2v/

basically it'll match an element having BOTH classes!

answered Jun 10, 2011 at 20:20

Patricia

7,8024 gold badges40 silver badges70 bronze badges

Collectives™ on Stack Overflow

What does this css selector do?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related