Css multiple classes in one class

Using Multiple Classes With React CSS Modules

When working with CSS modules in React, applying styles from one class is straightforward. But, what about using multiple or nested class selectors? In this post, I will show you how to use multiple classes on one element using CSS modules in React. I will also teach you what to do when you have nested class selectors. If you are using Sass/SCSS modules, I have it covered at the end of the post as well.

Working with Many Classes in CSS Modules

Let’s start by applying styling from a single class in CSS modules. Create a CSS module file — Button.module.css .

.button   background-color: #ffffff;  border: 1px solid #2779e4;  border-radius: 7px;  color: #000000;  font-size: 1rem;  padding: 0.75rem 1.25rem; > 

These are some basic styles to create an outlined button. Import the Button.module.css file in your React component and apply the button styling.

import React from 'react'; import styles from './Button.module.css';  export default function Button()   return (  button className=styles.button> type="button">  Click me  button>  ); > 

Thanks to how CSS modules work, the styles.button will apply a unique value to className attribute of the button element. Because of that, the styles for .button selector coming from Button.module.css won’t clash with other styles in the project if they also use a .button selector. Now let’s apply multiple classes from a CSS module to a single element. In this case, let’s create a modifier for the outlined button to make it filled instead.

.button.filled   background-color: #2779e4;  color: #ffffff; > 

div className=`$firstClass> $secondClass> thirdClass fourthClass`>>div> 

If you want to use a value from a variable, you can wrap it around $<> . Otherwise, write it as a string. It might seem like you can throw the modifier class right in there, but it won’t work.

/* ❌ Won't load styles for the 'filled' class in Button.module.css */> button type="button" className=`$styles.button> filled`>>  Click here  button> 

The filled class won’t match the .filled styles defined in Button.module.css . That’s because the filled class coming from CSS modules looks more something like this _filled_gjkwa_3 when rendered in your application. CSS modules work by creating a unique identifier for each class individually, even if the selector chains together multiple classes or nests them. So, to apply multiple CSS modules classes, you have to set the className to use both classes individually.

/* ✅ Will load 'filled' class styles */> button type="button" className=`$styles.button> $styles.filled>`>>  Click here  button> 

.button > .button.filled > .button.filled.active > 

/* 1️⃣ .button */> button className=`$styles.button>`>>1button>  /* 2️⃣ .button.filled */> button className=`$styles.button> $styles.filled>`>>2button>  /* 3️⃣ .button.filled.active */> button className=`$styles.button> $styles.filled> $styles.active>`>>3button> 

Using Nested Classes in CSS Modules

If you have a CSS selector that applies styles to an element only when it is a child of an element with a specific class like so:

.card   background-color: #ffffff;  border: 1px solid #cccccc;  border-radius: 10px;  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,  rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; >  .card .body   padding: 1rem 1.25rem; >  .card .header   border-bottom: 1px solid #cccccc;  padding: 1rem 1.25rem; > 

In this case — .header and .body need to have a parent with a .card class. You have to specify the child class on the child element and the parent class on the parent for the styles to work.

import React from 'react'; import styles from './Card.module.scss';  export default function Card()   return (  div className=styles.card>>  div className=styles.header>>  h2>Card Titleh2>  div>  div className=styles.body>>Card Contentdiv>  div>  ); > 

The child styles are applied from styles.header property, although it might seem like they should be nested under styles.card.header instead.

Multiple and Nested Classes in SCSS

.button   background-color: #ffffff;  // ✂️  &.filled   background-color: #a84118;  > > 

This code will apply styles to an element with a .button class and an element with both .button and .filled classes. Using SCSS instead of CSS in CSS modules won’t change the way you apply multiple classes.

import React from 'react'; import styles from './Button.module.scss';  export default function Card()   return (  >  /* .button */>  button className=`$styles.button>`>>Onebutton>  /* .button.filled */>  button className=`$styles.button> $styles.filled>`>>Twobutton>  >  ); > 

.card   // ✂️  .header   // ✂️  >  .body   // ✂️  > > 

import React from 'react'; import styles from './Card.module.scss';  export default function Card()   return (  div className=styles.card>>  div className=styles.header>>  h2>Card Titleh2>  div>  div className=styles.body>>Card Contentdiv>  div>  ); > 

Источник

Use Mutliple Classes in One Element in CSS

1. Assign Multiple Classes to One Element and Style Both Classes at Once in CSS
2. Assign Multiple Classes to One Element and Style Both Classes Individually in CSS

This tutorial will introduce methods to use the multiple classes in one single element in CSS.

Assign Multiple Classes to One Element and Style Both Classes at Once in CSS

In HTML, we use the class attribute to assign the class to an element. We can apply class on all the elements in HTML like p , h1 — h6 , a , div , and many more. In CSS, we use the class selector . to select the element with the respective class name, and we can apply styles to it. But there are cases when we want to assign multiple elements to a single class and style the classes. In such cases, HTML allows us to assign multiple classes to a single element. We can write multiple class names separated by whitespace in any element. CSS also allows us to style such classes by selecting both classes at once. We can use the . selector to select the first-class and again select the second class without leaving whitespace. Then we can set the styles for the selected classes. We can assign more than two classes to a single element and apply the styles to all the classes at once.

For example, create three p tags in HTML and give them the class names first , second , and first second . Note that for the third class, there remains a whitespace between the class names. Write the texts KTM , Honda and Kawasaki for the three classes between the p tags. Select the class first in CSS and set its color to orange . Likewise, select the class second and set it to red and finally select both the classes as .first.second and set the color as green .

In the example below, we have used multiple classes in a single element and styled those classes at once.

p class="first">KTMp> p class="second">Hondap> p class="first second">Kawasakip> 

.first < color: orange; > .second < color: red; > .first.second < color: green; > 

Assign Multiple Classes to One Element and Style Both Classes Individually in CSS

We can assign multiple classes to a single HTML element and style both classes individually to write CSS more efficiently. Using this approach, we can control redundancy in the styles applied. We can apply the common styles to multiple classes and apply the unique styles to the specific class.

For example, create a class title in a p tag and write some text. Similarly, create another paragraph tag and assign the multiple classes title text to it. Write some text on the paragraph tag. In CSS, select the title class and set the background-color to skyblue . Then select the text class and give the color of green to it.

Here, the background color of both the paragraphs will be set to skyblue . It is because we have styled the title class to set the background color. And, there is a title class in both paragraphs. However, the second paragraph will only change its color to green because we have applied this style only to the text class. This approach enables us to use multiple classes for a single element to apply the common styles and individual style to the elements. In this way, we can assign multiple classes to a single element and can style the classes individually to write efficient CSS.

p class="title">  Hello there!  p> p class="title text">  Welcome to Rara Lake  p> 

.title   margin-bottom: 30px;  background-color: skyblue; >  .text   color: green; > 

Источник

How to add multiple classes to HTML elements

Last Updated Jun 18, 2022

Any HTML element can have as many different classes as needed to style the element using CSS effectively.

To assign multiple classes to a single HTML element, you need to specify each class name inside the class attribute separated with a blank space.

For example, the following

element is assigned one class called heading :

 The following example below shows how to assign two classes: heading and font-large to the same paragraph:

 A class name that has more than one word is commonly joined with a dash ( - ) this is also known as the kebab-case.

There is no limit to how many class names you can add to a single HTML element. But keep in mind that you need to keep the class names intuitive and descriptive.

I’d recommend you put 10 class names at maximum in a single HTML element to keep your project maintainable.

HTML multiple classes for styling purpose

HTML classes are used for styling the elements rendered on the browser.

By creating multiple classes that serve different styling purposes, you can reuse the classes in many different elements without having to repeat the styling.

For example, you can have a class called font-small to adjust the font-size property to smaller than regular font size, while the font-large class will make the font-size larger than regular.

Suppose you have a style sheet with the following CSS rules:

You can add the CSS classes above to your HTML elements.

Here’s an example of adding the classes to a element:

• What property will this class modify? Use it as the first part of your class name.
• What is the value of the property being modified by this class? Use it as the second part of your class name

For example, if you’re changing the background-color property to grey , then the class name .bg-color-grey would be a good choice.

If the value of the property is not exact, then you can use a word that would describe the output relative to a regular element.

For example, font-small describes that the font size for the assigned element will be smaller than a regular element, so you can use that instead of font-size-12 although the latter is more precise.

Sometimes you can also abbreviate small as sm and create an xs style for extra-small :

Writing good HTML class names takes practice and time because classes can be used by both CSS and JavaScript to manipulate the presentation and the interactivity of HTML pages.

You’re going to get better as you write more code, and the rule of two above will help you start on the right mindset 👍

Now you’ve learned how to assign multiple classes to a single HTML element. Nice work!

Learn JavaScript for Beginners 🔥

Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.

A practical and fun way to learn JavaScript and build an application using Node.js.

About

Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.

Search

Type the keyword below and hit enter

Tags

Click to see all tutorials tagged with:

Источник