3 replies [Last post]
Gonzaga
Offline
Regular
Austria
Last seen: 15 years 15 weeks ago
Austria
Timezone: GMT+1
Joined: 2006-01-17
Posts: 34
Points: 0

Hello I've got 2 questions ...

The first is about overriding of equaly named classes. When I have 2 classes of the same name in my css-file, the last one overrides the first one right? ... But what if the class is nested in some other class ... does that rules still apply? If so ... what can I do do make the nested class intepentent? Here an example:

.class01 {
color: red;
border: solid 1px green;
}

.somediv .class01 {
color: blue;
}

Will the first definition be overwritten by the second one? Will the second class have a border?

*****************************
The other question is about modification of classes ... Here an example:

a {
color: red;
}

a:hover {
color: blue;
}

In the code there is the following line:
<a href="#" style="color: green">BlaBla</a>

The hyperlink will now be green, but the hover color does not work any more ... what can I do to make it work without having to add an additional class - is that possible?

Hope somebody knows an answer ... great forum ...

Greetings ... Andreas.

velo
velo's picture
Offline
Enthusiast
Fayettenam
Last seen: 12 years 36 weeks ago
Fayettenam
Timezone: GMT-5
Joined: 2004-11-11
Posts: 181
Points: 0

Re: 2 short questions ...

if you have two declarations for a class with conflicting styles, the latter one(Drunk will take precedence. However, this only applies for the styles you have in both class declarations. If you declare a style, font-size for example, in one style and you have no font-size in the other, the one font-size style will be applied.

Also, if you have a style you want to apply to multiple classes and then want to style one of those classes more specifically, you should declare the specific style after the multi-class style.

inline style always take precedence and override styles declared in external stylesheets.

Give a man a fire and he will be warm for a while. Set a man on fire and he will be warm for the rest of his life.

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 24 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

2 short questions ...

for the first question you have to think about the specifity - if something is more specific it will take priority. This mean that if you have

.somediv .class01 
{
color: blue;
} 

it will always override, regardless of location

.class01 
{
color: red;
border: solid 1px green;
} 

for selectors that are just as specific as one another. Remeber that ID's are more specific then classes so

#class01 {
color: red;
border: solid 1px green;
}

will always override

.class01 {
color: red;
border: solid 1px green;
}  

and

.somediv .class01 {
color: red;
border: solid 1px green;
}  

For the second question you have to add the link colour in the stylesheet rather than using line styles. When you add the inline style it applies to all states of the link (hover, focus, active etc) and overrides anything defined in the stylesheet. If you are trying to have a subset of links green - then yes you have to either add a class to these OR if say they are all inside a containing div/element you can have

a 
{
color: red;
}

#sidebarorsomething a
{
color: green
}

a:hover 
{
color: blue;
} 


Gonzaga
Offline
Regular
Austria
Last seen: 15 years 15 weeks ago
Austria
Timezone: GMT+1
Joined: 2006-01-17
Posts: 34
Points: 0

2 short questions ...

Wow ... thanks for the quick answers ... things are a lot clearer now for me ...

This is a great forum ... CSS rules ...

Greetings ... Andreas.