Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

priority of multiple css class

Posted on 2009-04-02
3
Medium Priority
?
513 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 500 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

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

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

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn how to dynamically set the form action using jQuery.
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.
Suggested Courses

572 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