CSS Multiple Classes

css multiple classes: If you want two or multiple classes on single element do it this multiple best way: Combinations of Classes and IDs, ID and Class Selector, Double Class Selector, Multiples classes and many more

css multiple classes Examples

Contents

Syntax

<p class = "chocolate green red"> Welcome To Pakainfo... </p>

The first p gets the properties of chocolate, the second p gets those of green, while the third gets the properties of both chocolate and green.

<html>
 <head>
 <style>
.chocolate {
    color: #D2691E;
}

.green {
    background-color:#296BCB;
}
 </style>
 </head>
 <body>
    <p class="chocolate">text 1 chocolate</p>
    <p class="green">text 2 green</p>
    <p class="chocolate green">text 3 chocolate & green</p>
 </body>
</html>

Using two CSS classes on one element

<p class="tamil">paka</p>
<p class="logo">info</p>
<p class="tamil logo">pakainfo</p>

css code

.tamil { color: pink; }
.logo { color: #eee; }
.tamil.logo { color: chocolate; }

Multiple Class / ID and Class Selectors

#megamenu.callout {  }

#megamenu .callout { }

ID and Class Selector

<h1 id="one" class="two">This Should Be chocolate</h1>

//CSS code
#one.two { color: chocolate; }

Double Class Selector

<h1 class="three four">Double Class</h1>

//CSS code
.three.four { color: chocolate; }

Multiples

.snippet#megamenu.code.chocolate { color: chocolate; }

Example

<div class="chocolate border card"></div>
<div class="brown border card"></div>
<div class="black border card"></div>
<div class="chocolate card"></div>
<div class="brown card"></div>
<div class="black card"></div>
<div class="border card"></div>

.card { width: 100px; float: left; margin: 0 10px 10px 0; }
.chocolate { color: chocolate; background: pink; }
.brown { color: brown; background: light-brown; }
.black { color: black; background: light-black; }
.border { border: 5px solid #eee; }

Example :

#megamenu { color: chocolate; }
#megamenu.override { color: #eee; }

.override { color: #eee !important }

here you can learn to “Grouping Multiple CSS Selectors” like as a CSS selector for multiple sub-elements.

Also Read This 👉 how do you display hyperlinks without an underline?

Don’t Miss : jQuery Multiple Class Selectors Match

.doc_article h1,
.doc_article h2,
.doc_article h3,
.doc_article h4,
.doc_article h5,
.doc_article h6 {
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

Example: index.html

<!DOCTYPE html>
<html>
<head>
<style>
div, p, img {
   display: block;
   margin: auto;
   text-align: center;
   border-bottom: double orange;
}
</style>
</head>
<body>
<div>Welcome To Pakainfo</div>
<p>This is sample text.</p>
<br/>
<img src="https://www.pakainfo.com/demo/media/logo.jpg">
</body>
</html>

you can use css multiples classes same style Example : css assign multiple classes to one element

Also Read This 👉 css nested classes - How to create a nested class selector?

css multiple classes same rule

.document1, .document2, .document3 {
}

.document4, .document5, .document6 {
}

css change multiple classes

.documentOne, .documentTwo { /* I will now both be changed */
	margin: 0 auto; 
}

css multiple classes

<div class="a-document another-document"></div>

I hope you get an idea about css multiple classes.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Pakainfo

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Also Read This 👉 blockquote css - HTML blockquote styling