Geek asks and answers

What does this css selector do?

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

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

Is it .text-box.multi-linejust the name of the class where the dot is in the middle, or is it an embedding of two classes? Or is it completely different? 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 page .

+3
source share
5 answers

it corresponds to an element with both classes, i.e.

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

It will not match if the element has only 1 of the classes. It will match if an element has these two classes plus additional ones.

+5
source

, .

text-box, multi-line

:

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

:

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

:

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

Any element that has classes text-boxand multi-line.

+3
source

He will select this item:

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

Or any element with classes text-boxand multi-line, if it is important.

+2
source

Here is a small fiddle showing the difference:

http://jsfiddle.net/sGn2v/

basically this will correspond to an element having BOTH classes!

+2
source

More articles:


All Articles