Solved

priority of multiple css class

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
This video teaches users how to migrate an existing Wordpress website to a new domain.

760 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

20 Experts available now in Live!

Get 1:1 Help Now