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.
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 IE6, 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 CSS:
* {
color: black;
}
.foo.bar {
color: red;
}
Output on supported browsers is:
<div class="foo">Hello Foo</div> <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div> <!-- Not selected, black text [3] -->
Output on IE6 is:
<div class="foo">Hello Foo</div> <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div> <!-- Selected, red text [2] -->
Footnotes:
- Supported browsers:
- Not selected as this element only has class
foo
. - Selected as this element has both classes
foo
andbar
. - Not selected as this element only has class
bar
.
- Not selected as this element only has class
- IE6:
- Not selected as this element doesn't have class
bar
. - Selected as this element has class
bar
, regardless of any other classes listed.
- Not selected as this element doesn't have class
Css selector, elements between two classes
I think your best option is to use :not()
selector in CSS. CSS does not have a mechanism where you can select elements in between.
div:not(.start):not(.end) { background: red;}
<div class='start'>A</div><div>B</div><div>C</div><div class='end'>D</div>
Selector for element having one of two classes, but not both
You want :not(.first), :not(.last)
which is the Selectors level 3-supported version of :not(.first.last)
(from Selectors 4, not yet supported by all browsers, as well as jQuery):
ul.tabs > li.active:not(.first), ul.tabs > li.active:not(.last) { background-color: #F00;}
<ul class="tabs"> <li class="first">1st</li> <li class="active last">2nd</li></ul>
<ul class="tabs"> <li class="active first last">1st</li></ul>
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 with element between two classes
To comply explicitly with your requirements:
- selecting
<i>
with class "bar" - ONLY if it is under a button element (no class)
- which in turn, is under a div with class "foo"
You'll want this selector
div.foo > button:not([class]) > i.bar
In selector syntax, a space indicates any level below in the DOM hierarchy. The >
operator indicates a direct child.
If you don't necessarily want direct-child selection, just use spaces
div.foo button:not([class]) i.bar
If you're not particularly interested in the elements (other than <button>
) and don't care what classes may or may not be on the <button>
, simply use
.foo button .bar
Your selector .foo button.bar
was looking for a <button>
with class bar
that was any level below an element with class foo
.
CSS rule to apply only if element has BOTH classes
div.abc.xyz {
/* rules go here */
}
... or simply:
.abc.xyz {
/* rules go here */
}
CSS Selector with multiple class and one ID
You need to add the id
in both. Each one is a different selector:
.page-id-47745 #masthead,
.page-id-35419 #masthead {
padding-bottom: 40px !important;
}
Related Topics
How to Keep Two Divs on the Same Line
Css Hover Drop Down Menu Disappears When Trying to Select Menu Option
Is There a CSS Selector for Elements Containing Certain Text
How to Get the Footer to Stay At the Bottom of a Web Page
Format Text in a ≪Textarea≫
How to Disable Text Selection Highlighting
What Does the CSS Rule "Clear: Both" Do
Custom CSS Scrollbar For Firefox
Svg Data Image Not Working as a Background-Image in a Pseudo Element
Import Regular CSS File in Scss File
Is Quoting the Value of Url() Really Necessary
Remove Blue Border from CSS Custom-Styled Button in Chrome
Same Font Except Its Weight Seems Different on Different Browsers
Is the CSS Star Selector Considered Harmful (And Why)
Css Z-Index Lost After Webkit Transform Translate3D
Control the Dashed Border Stroke Length and Distance Between Strokes