Class Names Concatenated or Separated by a Space

Class names concatenated or separated by a space

You separate classes by a space when you want to refer to descendant element and you concatenate them when you want to refer to a single element with multiple classes.

For example, to refer to a div with two classes, e.g. <div class="foo bar"> you could use:

div.foo.bar {...}

To refer to the child span element <div class="foo"><span class="bar">stuff</span></div> you could use:

div.foo .bar {...}

How to add multiple classes to a ReactJS Component?

I use classnames when there is a fair amount of logic required for deciding the classes to (not) use. An overly simple example:

...
    var liClasses = classNames({
      'main-class': true,
      'activeClass': self.state.focused === index
    });

    return (<li className={liClasses}>{data.name}</li>);
...

That said, if you don't want to include a dependency then there are better answers below.

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

Selenium Python - Finding Elements by Class Name With Spaces

Those are multiple classes, not a single class with spaces, just use all the classes together.

driver.find_element_by_css_selector('.class1.class2.class3')

In CSS selector a dot . is a class, you can concatenate any number class names

How to avoid Compound Class name error in Page Object?

Use a CSS selector instead:

.country.name

The important thing to note is that this example is wrong! If "country name" is meant as a name of a country, that is. Class names can't have spaces in them. In fact, the class attribute is a space-separated list of classes. That means that if you have a class country name, it's not one class, it's two different classes your element belongs to - the first is country, the second is name!

Therefore, fix your classes, if they're wrong. If they're not, use a CSS selector, it's the only reliable way to match multiple classes (apart from a very long and complicated XPath expression). Don't use trivial XPath expressions or CSS selectors with naive attribute comparison (//*[@class='country name'] or *[class='country name']), that's just plain wrong.

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

Jquery how to Concat value which are separated by space

The issue isn't the concatenation (which is working fine) the problem is that id attributes cannot have spaces.

You need to either remove those spaces

facetHtml + = "<li id=" + data.facets[key].displayName.replace(/\W/g, '') + "><h3>" + data.facets[key].displayName + "</h3>";

Or replace them with another character.

facetHtml + = "<li id=" + data.facets[key].displayName.replace(/\W/g, '-') + "><h3>" + data.facets[key].displayName + "</h3>";

Note that the use of a regular expression here (/\W/g) will capture and replace all spaces in the string. Using a simple replace on a space (' ') will only replace the first instance.

---

Related Topics