Professional Website Design Company UK
Support us Advertise Write for PM Design Submit Freebie Submit Your Website
Tutorials » CSS Tutorials » Applying style to an element…

Applying style to an element only if multi-class union exist

5
 
Posted on 14th Jan, 2010. Posted in:

applying style to union class elementUsing 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:

<div class="style_1 style_2"> </div>

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:

div.border {
border: 1px solid #333 ;
}
div.background {
background-color: #9f9f9f ;
}
div.shadow {
text-shadow: #333 1px 1px;
}

Our HTML reads:

<div class="border">.border</span></div>
<div class="background">.background</div>
<div class="shadow">.shadow</div>

The effect is obvious:

applied one style to each div element

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:

/* —- Now the fun begins! —- */
div.border.background {
color: #44c6ec;
}
div.border.background.shadow {
text-transform:uppercase;
}

And add 2 more DIV tags:

<div class="border background">.border.background</div>
<div class="border background shadow">.border.background.shadow</div>

Our final result:

apply different style to element containing multiple classes

This is it! I hope you liked it. Don’t forget to share and comment below!

Enjoyed this entry? Share it around!

 

Share it with others. Make others aware about web design tips, techniques and news.

 
 

You may also like to read

 
 
 
  • Dan

    Wow, That’s pretty cool! I wan’t aware of that!

  • sl01k

    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

  • http://www.pawelmartuszewski.co.uk Pawel

    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…

  • sl01k

    i dont care (like youtube) about ie6 …
    and OK :) i understand this is to demonstrate the possibilities, not recommendations

  • http://booger.com chucklesThePig

    Man oh man – this is handy. Thanks! Multi-selector fun in Magento!

  •  
    •  
     
     
     
    Copyright © 2008 - 2012. All rights reserved.
    Pawel Martuszewski Design – Web Design Tutorials, operated by Direct Media Design