?
Solved

priority of multiple css class

Posted on 2009-04-02
3
Medium Priority
?
510 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

Question has a verified solution.

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

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

762 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