Applying style to an element only if multi-class union exist
5
Using CSS, you can apply multiple styles to one HTML element. This is obvious and helps to keep our HTML and CSS clean and redundant. What happens if we want to style the element differently ONLY if two different classes applied?
demo
CSS standard multiple class styling
It is nothing special and new that we are allowed to apply multiple CSS styles to one HTML element. It helps to keep our CSS clear and clean and can reduce our CSS size drastically. This can be accomplished as shown below:
Situation gets more complicated if we would like to style the element differently ONLY if two classes are applied. CSS multiple class styling with the different style on multi-class elements.
Let’s create 3 different classes and apply them to our div elements.
CSS styles looks like this:
border: 1px solid #333 ;
}
div.background {
background-color: #9f9f9f ;
}
div.shadow {
text-shadow: #333 1px 1px;
}
Our HTML reads:
<div class="background">.background</div>
<div class="shadow">.shadow</div>
The effect is obvious:
Apply a different styles to elements that contain 2 or more CSS classes!
Basicly if the element have .background and .border classes assigned to itself, we would like to change the color. And another element, if 3 classes are assigned we would like to add uppercase styling.
Add this to our existing CSS:
div.border.background {
color: #44c6ec;
}
div.border.background.shadow {
text-transform:uppercase;
}
And add 2 more DIV tags:
<div class="border background shadow">.border.background.shadow</div>
Our final result:
This is it! I hope you liked it. Don’t forget to share and comment below!
Enjoyed this entry? Share it around!
You may also like to read
Your words are your own, but you agree that I have the right to delete as I feel necessary.
-
-
What´s Hot on The Blog!
CSS Gallery Sumission!
Inspire others. Sumit your website. SEO Questions and Answers
Never fully answered! -
-
-
Featured CSS Gallery Inspiration
Latest CSS Gallery Inspiration
-
Popular Tags
Admin News Apple Contribute CSS debug Facebook Freelance Fun Linke Exchange Navigation Optimisation Photoshop PHP Promotion Search Engine Symfony Twitter Wordpress -
Tutorials
-
Articles
-
Wow, That’s pretty cool! I wan’t aware of that!
hmm
nice article but in my opinion this is bad way for styling…
why ?
- you create not semantic css
- you have to much css …
- if you do on this way huge website you will be have huge mees in css. ..
so i think that this is bad practice …
but of course .. easy to use and sometimes nice
i prefer using the power of selectors “>”, “+” and semantic names for class …
one tip … – may by you should try use a CSS freamwork ?
i think in this time this is the best practice :)
regards
marek m
Marek,
Thanks for your feedback… and I see where are you coming from ;) But I think you missed the purpose of this demonstration…
Let me clarify few things…
- First of all. I didn’t say anything about recommendations and this is a bad practice to use on a daily basis. The purpose was to demonstrate the possibilities and make people aware, because sometimes we don’t have a choice and we have to style the element this way – forced by platform (eg. Wordpress navigation) etc.
- “>” and “+” selectors ? fine! ;) but they will not allow us to accomplish the task demonstrated in this tutorial (style element if CSS union) and what if it comes to IE6 and compatibility? ;)
- CSS framework? Are you joking? CSS is too easy to use framework on ;)
Hope this clarifies a few things…
i dont care (like youtube) about ie6 …
and OK :) i understand this is to demonstrate the possibilities, not recommendations
Man oh man – this is handy. Thanks! Multi-selector fun in Magento!