CSS: Using multiple selectors

I was fiddling around with a Windows 8 app today which I’m developing using HTML 5 and I was making some changes to the HTML structure. One of the things I was changing was that some parts of the content was supposed to be inactive at the opening of the app and later on activated. I wanted to display these things as inactive by changing their text color to gray.
To do this I gave them the class Inactive and set the color of the text in that class to gray using CSS. One problem though that some of inactive content was going to have one kind of gray and other inactive content was going to have another kind if gray but they were both using the class Inactive.
One thing I could do is to create two separate classes but I liked the name Inactive as it was descriptive and concise. What I actually wanted to do is to say all the elements with the class Inactive AND the class XXX. Luckily, this could be done. Look at the following example:

<!DOCTYPE html>
<html>
	<head>
		<title>CSS Test</title>
		<meta charset="UTF-8" />
		<style type="text/css">
			/* Will affect all elements with the class Inactive */
			.Inactive
			{
				color: LightSlateGray ;
			}
			
			/* Will affect all elements with the class Content AND Inactive */
			.Content.Inactive
			{
				color: DimGray;
			}
		</style>
	</head>
	<body>
		<div class="Content Inactive">
			<p>Some of my content</p>
		</div>
		<div class="Content Active">
			<p>Some of my content</p>
		</div>
		<div class="Stuff Inactive">
			<p>Some of my stuff</p>
		</div>
		<div class="Navigation">
			<ul>
				<li>Home</li>
				<li class="Inactive">Links</li>
				<li>Guestbook</li>
			</ul>
		</div>
	</body>
</html>

I want to inactive the stuff in the class Content but not in the class Stuff. But I can’t do “.Content .Inactive” because they are set to the same element. Luckily I could combine to two into “.Content.Inactive“. Notice that there is no space between the classes:

/* Will affect all elements with the class Inactive */
.Inactive
{
	color: LightSlateGray ;
}

/* Will affect all elements with the class Content AND Inactive */
.Content.Inactive
{
	color: DimGray;
}

This can be very handy. I don’t know why I haven’t seen it before. There is supposed to be compatibility issues with IE6 but it’s 2013 so either you don’t support IE6 anymore or, if you do, you will have learned how to handle IE6 specific issues already (the problem in IE6 with .Content.Inactive is that it will only read the first class, .Content, and skip the rest).

Leave a Reply