CSS rule to apply only if element has BOTH classes
div.abc.xyz {
/* rules go here */
}
... or simply:
.abc.xyz {
/* rules go here */
}
Apply CSS Rules Only If 2 Classes are Set to an Element
Sure:
.one.two { border: 1px red solid }
Can you target an element with CSS only if 2 classes are present?
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.
CSS Selector that applies to elements with two classes
Chain both class selectors (without a space in between):
.foo.bar {
/* Styles for element(s) with foo AND bar classes */
}
If you still have to deal with ancient browsers like Internet Explorer 6, be aware that it doesn't read chained class selectors correctly: it'll only read the last class selector (.bar
in this case) instead, regardless of what other classes you list.
To illustrate how other browsers and IE6 interpret this, consider this snippet:
* {
color: black;
}
.foo.bar {
color: red;
}
<div class="foo">1. Hello Foo</div>
<div class="foo bar">2. Hello World</div>
<div class="bar">3. Hello Bar</div>
Using two CSS classes on one element
If you want two classes on one element, do it this way:
<div class="social first"></div>
Reference it in css like so:
.social.first {}
Example:
https://jsfiddle.net/tybro0103/covbtpaq/
CSS: styling when element has two classes
You just answered yourself. Be wary of the IE6 bug.
class overrule when two classes assigned to one div
Multiple classes can be assigned to a div. Just separate them in the class name with spaces like this:
<div class="rule1 rule2 rule3">Content</div>
This div will then match any style rules for three different class selectors: .rule1
, .rule2
and .rule3
.
CSS rules are applied to objects in the page that match their selectors in the order they are encountered in the style sheet and if there is a conflict between two rules (more than one rule trying to set the same attribute), then CSS specificity determines which rule takes precedence.
If the CSS specificity is the same for the conflicting rules, then the later one (the one defined later in the stylesheet or in the later stylesheet) takes precedence. The order of the class names on the object itself does not matter. It is the order of the style rules in the style sheet that matters if the CSS specificity is the same.
So, if you had styles like this:
.rule1 {
background-color: green;
}
.rule2 {
background-color: red;
}
Then, since both rules match the div and have exactly the same CSS specificity, then the second rule comes later so it would have precedence and the background would be red.
If one rule had a higher CSS specificity (div.rule1
scores higher than .rule2
):
div.rule1 {
background-color: green;
}
.rule2 {
background-color: red;
}
Then, it would take precedence and the background color here would be green.
If the two rules don't conflict:
.rule1 {
background-color: green;
}
.rule2 {
margin-top: 50px;
}
Then, both rules will be applied.
Target elements with multiple classes, within one rule
.border-blue.background { ... }
is for when both classes are used together..border-blue, .background { ... }
is for either class..border-blue .background { ... }
is for where '.background' is the child of '.border-blue'.
See Chris' answer for a more thorough explanation. Also see W3 Docs on CSS Combinators
override a CSS class if two other classes are present
Just go
.class1.class2.class3 {
/* these definitions are more specific and don't need !important; */
}
Remember this requires you to put class3
on the element as well:
<element class="class1 class2 class3"></element>
If the only reason you wanted to add class3
is to specify styles that should be applied when both classes class1 class2
are present, you don't even need class3
, just go
.class1.class2 {
/* these definitions are more specific than those for .class1 or .class2
and don't need !important;
These rules apply to any element that has both class1 and class2 */
}
Related Topics
How to Imitate the Look of the Outline and Label from Material-Ui's Outlined Textfield
Google Fonts: Define Custom Name in CSS
How to Allow Flex-Items to Grow While Keeping the Same Size
Border-Radius: 50% Not Producing Perfect Circles in Chrome
Stop PHPstorm File Watchers Running Recursively (With Autoprefixer)
CSS Multiple Backgrounds Not Working on IE8
CSS Variables - Swapping Values
Css3 Transition ( Vendor Prefixes) Crashes Safari Immediately
Using Class Set in Media Query as Mixin in Less
Circle with Three Different Border Colors
Article Push/Pull Alignment Using Bootstrap 3
What Is the Math Behind -Webkit-Perspective
Css3: Two Transitions with Different Timing Functions (Css3)
How to Provide CSS Properties for Different Browsers Like Mozilla and Chrome
How to Code an Arrow Using CSS