• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 189
  • Last Modified:

same css names

how about if first one do not have font size, will it use the first font size, that means it will combine two classes elements

.bluetxt
{font-color: red; font-size: 12px}

.bluetxt
{font-color: blue; }

From what i test it, the result seems like this
.bluetxt
{font-color: blue; font-size: 12px}

Looks like a COMBINE rather than override

Please confirm with me,
Tommy
0
hongclub
Asked:
hongclub
  • 3
  • 2
  • 2
1 Solution
 
Greg AlexanderLead DeveloperCommented:
Yes, it will merge the classes together, notice its blue so it does override too.
0
 
Greg AlexanderLead DeveloperCommented:
The attached shows how to prevent the override

.bluetxt
{
font-color: red !important; 
font-size: 12px;
}

.bluetxt
{font-color: blue; }

Open in new window

0
 
Greg AlexanderLead DeveloperCommented:
Actually font-color is not supported it would be
<style>
.bluetxt
{
color: red !important; 
font-size: 50px;
}

.bluetxt
{
color: blue; 
font-size: 50px;
}


</style>

<div class="bluetxt">Here</div>

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
DanielleFavreauCommented:
To help clarify, cascading style sheets work by overriding anything that was previously declared.

In your case you declare the color in both but the size in one.  Which means the color will be overridden but the size will remain the same:

.bluetxt { color: #FFF; font-size: 0.8em; font-weight: bold; }
[[color is actually white, font size is 0.8 em, bold text ]]

.bluetxt { color: #00F; }
[[now color is blue, font size is still 0.8 em, text is still bold]]

.bluetxt { color: #F00; font-size: 0.7em; }
[[now color is red, font size is smaller at 0.7 em but the text is still bold ]]

.bluetxt { color: #00F; font-size: 0.9em; font-weight: normal; }
[[color is blue, font size is larger at 0.9 em, and the text is normal - not bold]]

If your class name is the same then you have to override each declaration in order to make it change.  If you want the font size to change in yours you have to declare a new font-size in your second version of the class.  Remember, style sheets read down the page, whatever is lower on your page will override anything above it (by the same name).
0
 
hongclubAuthor Commented:
Thanks for all you guys, finally i got confirmed.

Here is another question related to that, how i totally ignore the first class if there are two classes with the same names?

For example:
(first one)
.bluetxt
{
color: red;
background-color: yellow;
}

(seoncd one)
.bluetxt
{
color: blue;
font-size: 50px;
}


How can i just want the result as second one and ignore all first one items, like the background-color should be ignore????

The reason i ask that because in my project, i have one master .css file which is shared for all projects of different team, i should not touch that .css file, in my project i have another .css file in my project folder, so i bring down (like copy then modify) some css classes to my project, in some cases,
it works if i want to override the master css, but if i really want to remove one css class in the master css file, not sure how i can do that without modify the master css.

Please advise,
Tommy

0
 
hongclubAuthor Commented:
any response?
0
 
DanielleFavreauCommented:
.bluetxt
{
color: red;
background-color: yellow;
}

-- See below for how to negate the background-color. --

.bluetxt
{
color: blue;
font-size: 50px;
background-color: none;
}

.bluetxt
{
color: blue;
font-size: 50px;
background-color: transparent;
}
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now