Multiple Classes Inside :Not()

Multiple classes inside :not()

You can use:

div:not(.one):not(.three) {
    color: #F00;
}

Fiddle

Can the :not() pseudo-class have multiple arguments?

Why :not just use two :not:

input:not([type="radio"]):not([type="checkbox"])

_{Yes, it is intentional}

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/

How to select a multiple classes inside a two condition class?

    /* Matches elements with the class of company_logo 
       that are inside an element 
       with both "mobile" and "portrait" classes */
    
    .mobile.portrait .company_logo {
       /* style here */
    }

CSS :not selector - exclude multiple classes from hover

This:

.base:not(.base_green):not(.base_blue):hover {
    background-color: #E2E2E2;
}

works perfectly fine if thrown in a JSFiddle

Tested with the following HTML:

<div class="base base_green">GREEN</div>
<div class="base base_blue">BLUE</div>
<div class="base base_green base_blue">GREEN & BLUE</div>
<div class="base">BASE</div>

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 can I apply styles to multiple classes at once?

.abc, .xyz { margin-left: 20px; }

is what you are looking for.

What do commas and spaces in multiple classes mean in CSS?

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

That says "make all .grid_6's within .container_12's and all .grid_8's within .container_16's 460 pixels wide." So both of the following will render the same:

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

As for the commas, it's applying one rule to multiple classes, like this.

.blueCheese, .blueBike {
  color:blue;
}

It's functionally equivalent to:

.blueCheese { color:blue }
.blueBike { color:blue }

But cuts down on verbosity.

How to add multiple classes in Material UI using the classes props?

you can use string interpolation:

<div className={`${this.props.classes.container} ${this.props.classes.spacious}`}>

How to apply two CSS classes to a single element

1) Use multiple classes inside the class attribute, separated by whitespace (ref):

<a class="c1 c2">aa</a>

2) To target elements that contain all of the specified classes, use this CSS selector (no space) (ref):

.c1.c2 {
}

---

Related Topics