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

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.

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

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.