Css Selector That Applies to Elements With Two Classes

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:

    1. Not selected as this element only has class foo.
    2. Selected as this element has both classes foo and bar.
    3. Not selected as this element only has class bar.


  • IE6:

    1. Not selected as this element doesn't have class bar.
    2. Selected as this element has class bar, regardless of any other classes listed.

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



Leave a reply



Submit