Solved

priority of multiple css class

Posted on 2009-04-02
3
504 Views
Last Modified: 2012-05-06
for example,
<div class="class1 class2">abc</div>
.class1 {background-color:red}
.class2 {background-color:blue}
then I get blue background.

In contrast,
<div class="class1 class2">abc</div>
.class2 {background-color:blue}
.class1 {background-color:red}
Then I get red background.

It is based on the order of the classes defined in the css file but not in the div's class="..."??
0
Comment
Question by:candychan611
3 Comments
 
LVL 9

Expert Comment

by:unassassinable
ID: 24056563
It is based on the order the CSS is written in, not the HTML.  The class attributes can be in any order.  This is because the HTML file is loaded, then it reads the CSS file.  
0
 
LVL 13

Accepted Solution

by:
qwerty021600 earned 125 total points
ID: 24056601
It is because it will read the class1 first and give the color Red, then it'll scroll and give color Blue in the first scenario.

While in the second case, it'll give color Red because Class1 is specified at the last.

Order of Classes in CSS is taken into consideration.
0
 

Author Closing Comment

by:candychan611
ID: 31566117
Thanks for your explanation.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question