As you probably already know, you may have multiple classes on elements separated by a space.
<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?
<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)?
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.
HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With