Solved

priority of multiple css class

Posted on 2009-04-02
3
503 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

867 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now