CSS selector for two classes on the same element (and hover)

by EvanJPalmer

...because the Fifth Element

This one wasn’t entirely obvious to me at first, so, why not throw a up a post about it.

If I have some HTML, and I want to apply a style to an element with two classes (rather than one), how do I select it? How do I then only select that when it’s parent has been hovered over?

HTML


<div class="image-box editable"><span class="edit-image">only show this on hover</span></div>
<div class="image-box"><span class="edit-image">This should always be shown</span></div>

CSS:

.image-box{
	border: 1px solid #000;
	height: 100px;
	width: 100px;
}

.image-box.editable .edit-image {
	display: none;
}

.image-box.editable:hover .edit-image {
	display: inline;
}

It’s pretty simple. Just select the first class you’re interested, in the usual way, with a period, then the second class, also with the period, but ensure there is no space between them.

Check it out in action here:

http://dabblet.com/gist/5148997

Advertisements