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
How to select an element with 2 classes
You can chain class selectors without a space between them:
.a.b {
color: #666;
}
Note that, if it matters to you, IE6 treats .a.b
as .b
, so in that browser both div.a.b
and div.b
will have gray text. See this answer for a comparison between proper browsers and IE6.
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 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>
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.
Is there a way to individually target multiple CSS classes at once?
Use a comma.
.nav-1:hover,
.nav-2:hover,
.nav-3:hover {
color: #fc9426;
}
Although I don't have any markup to go off of, it looks like you could create a helper/modifier class instead of defining the same thing over and over again.
It might look something like this:
[class^="nav-"] { margin: 1rem 0; padding: 0 1rem; min-height: 3rem; color: #333; font: 1rem/3rem Arial, sans-serif; border-bottom: 1px solid black;}
/** * Utility/Modifier style properties that * any nav could add to their base of styles. */.nav-branded { color: white; background-color: #fc643c;}.nav-branded:hover { background-color: hotpink;}
/** * These classes have styles specific to * each class (acts like an ID but * without the specificity). */.nav-1 { /* Waiting for some styles. */}.nav-2 { border-bottom-width: 4px;}.nav-3 { border-bottom-style: dashed;}
<nav class="nav-1 nav-branded">Nav One</nav><nav class="nav-2">Nav Two</nav><nav class="nav-3 nav-branded">Nav Three</nav>
How to target an after of an element with two classes with SCSS?
Well you can do it in a few ways
a. This you should use if you want to add some styles to the .active
class also.
.item {
background: red;
height: 100px;
width: 100px;
&.active {
&:after{
content: "aaa";
}
}
}
or
b. This you should use if you want just to add some styles to the :after
pseudo-element if item
has class active
.item {
background: red;
height: 100px;
width: 100px;
&.active:after{
content: "aaa";
}
}
see jsFiddle
Sass - two classes in a single tag
Here you go:
.question_actions {
float: right;
font-size: 1em;
width: 110px;
.question_action {
margin-bottom:8px;
padding: 3px;
}
&.active {
//some css
}
}
CSS rule to apply only if element has BOTH classes
div.abc.xyz {
/* rules go here */
}
... or simply:
.abc.xyz {
/* rules go here */
}
Related Topics
Horizontal Submenu for a Vertical Main Menu Using Bootstrap
Why Is This Div's Calculated Height More Than Its Content
How to Override Background Image Defined in CSS with Another CSS
Unnoticeable Lesscss Compiler in Eclipse Pdt
Which Monospace Font Does a Browser Use
Fixed Position Misbehaviour in Ie11
How to Position a Background Image Relative to The Centre of an Element
Javafx Listview Selection Bar Text Color When Using Cellfactory
Force Absolute Div to Listen to Parent's Padding
How to Make CSS3 Columns on a Horizontal Plane
Internet Explorer Not Recognizing CSS for Svg Elements
Twitter Bootstrap Grid Vertical Align Bottom
How to @Import .CSS File as a .Scss File in Sass
How Can The Pseudo Element Detect The Height of The Non-Pseudo Element