Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can you target an element with CSS only if 2 classes are present?

As you probably already know, you may have multiple classes on elements separated by a space.

Example

<div class="content main"></div> 

And with CSS you can target that div with either .content or .main. Is there a way to target it if and only if both classes are present?

Example

<div class="content main">I want this div</div> <div class="content">I don't care about this one</div> <div class="main">I don't want this</div> 

Which CSS selector would I use to get the first div only (assume I can't use .content:first-child or similar)?

like image 449
alex Avatar asked Mar 13 '09 00:03

alex


People also ask

Can a CSS element have two classes?

An element is usually only assigned one class. The corresponding CSS for that particular class defines the appearance properties for that class. However, we can also assign multiple classes to the same element in CSS. In some cases, assigning multiple classes makes page styling easier and much more flexible.

Can an HTML element belong to two classes at the same time?

HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them.

How do I target a specific element in CSS?

URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.


1 Answers

Yes, just concatenate them: .content.main. See CSS class selector.

But note that the Internet Explorer up to version 6 doesn’t support multiple class selectors and just honors the last class name.

like image 180
Gumbo Avatar answered Oct 01 '22 03:10

Gumbo