How Specify Two CSS Classes: from Property and Conditional Class

How specify two css classes: from property and conditional class

Use the class binding

<div data-bind="class: myClass" >

View model :

var vm = {
     myClass : ko.observableArray(),
};
vm.myClass.push('class1');
vm.myClass.push('class2');

You can also use the class binding with a computed.

But if you don't want to use it, you can do that :

<div data-bind="attr: { 'class' :( Color() +  (SomeBooleanProperty() ? ' my-class' :'')) }">

CSS rule to apply only if element has BOTH classes

div.abc.xyz {
    /* rules go here */
}

... or simply:

.abc.xyz {
    /* rules go here */
}

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

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>

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/

SASS - How can I assign two classes the same style except one property?

To be quite honest I'm not sure why u don't want to write two different selectors, or just overide some property in second one. E.g

.class1, .class2, .class3 {    &:before{    content: 'class';  }}
.class2:before {  content: 'class2';}

Can a CSS class inherit one or more other classes?

There are tools like LESS, which allow you to compose CSS at a higher level of abstraction similar to what you describe.

Less calls these "Mixins"

Instead of

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

You could say

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

using css modules how do I define more than one style name

You can add multiple classes using css modules as follows:

className={`${styles.description} ${styles.yellow}`}

e.g.

function Footer( props) {
    return (
        <div className={styles.footer}>
            <div className={`${styles.description} ${styles.yellow}`}>
              <p>this site was created by me</p>
            </div>
        </div>
    );
}

Using react-css-modules you can use normal class name syntax:

<div styleName='description yellow'>

and you specify allowMultiple: true for multiple classes

What is the best way to conditionally apply a class?

If you don't want to put CSS class names into Controller like I do, here is an old trick that I use since pre-v1 days. We can write an expression that evaluates directly to a class name selected, no custom directives are necessary:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

Please note the old syntax with colon.

There is also a new better way of applying classes conditionally, like:

ng-class="{selected: $index==selectedIndex}"

Angular now supports expressions that return an object. Each property (name) of this object is now considered as a class name and is applied depending on its value.

However these ways are not functionally equal. Here is an example:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

We could therefore reuse existing CSS classes by basically mapping a model property to a class name and at the same time keep CSS classes out of Controller code.

---

Related Topics