Target Elements with Multiple Classes, Within One Rule

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

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>

Target children of multiple classes with one CSS selector rule

You can use the attribute selector with :not() to select anything that starts with .class* and exclude .class3

[class^="class"]:not(.class3) .subclass {  color: red;}

<div>      <div class="class1">          <p class="subclass">whatever</p>      </div>      <div class="class2">          <p class="subclass">whatever</p>      </div>      <div class="class3">          <p class="subclass">whatever</p>      </div></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/

Applying CSS rule to multiple class inside a class

As stated here, you pretty much have to use .clear multiple times, like so:

.clear select, .clear input, .clear p, .clear .section-content {
  opacity: 0;
  transition: 0.2s;
}

Sadly, with CSS alone there is no other way.

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.

---

Related Topics