Can You Target an Element with CSS Only If 2 Classes Are Present

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 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 }

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.

Can you target an element with CSS when inherited classes are present?

This is basic CSS - separate the class names by a space, that implies/applies the cascade:

.contaminated .header { ... }

Anything wrong with that?

Cheers

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 add CSS if element has more than one child?

You can't directly 'count' total numbers of elements in CSS, so there's no way to only apply the class if there's 2 or more divs (you'd need JavaScript for that).

But a possible workaround is to apply the class to all divs in the td...

td > div {
    margin-bottom: 10px;
}

... and then override/disable it with a different style when there's only one element. That indirectly lets you add the style when there's 2+ more child elements.

td > div:only-child {
    margin-bottom: 0px;
}

Alternatively you can apply to every div after the first one, if that happens to work for your situation.

td > div:not(:first-child) {
    margin-bottom: 10px;
}

Edit: Or as Itay says in the comment, use a sibling selector

td > div + div {
    margin-bottom: 10px;
}

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>

.grid > .content:first-child:not(:only-child) {    color: blue;}

<div class="grid">    <div class="content">I WANT TO APPLY CSS TO THIS</div>    <div class="content">But only if there is 2nd .content element in the same parent element</div></div><div class="grid">    <div class="content">Don't apply here</div></div><div class="grid">    <div class="content">Don't apply here</div></div><div class="grid">    <div class="content">I WANT TO APPLY CSS TO THIS</div>    <div class="content">But only if there is 2nd .content element in the same parent element</div></div>