CSS no inheritance ...

Forum Moderators: not2easy

Message Too Old, No Replies

CSS no inheritance ...

is there any way to cancel inheritance

irubin

10:49 pm on Jul 22, 2003 (gmt 0)

Hello,

I have a string embedded within h1 tags (which I would like to keep as is) that has a link for one of the words. The link takes on a different style (as defined in the stylesheet) than the rest of the string. Is there anyway to cancel all styles for that particular link, so that it stays within the same style as the h1 tag? Please keep in mind, that I can't change the default anchor class.

Any help will be appreciated.

Thanks.

-R

<h1>this is a <a href="#" class="test">sample</a> test</h1>

Reflection

11:06 pm on Jul 22, 2003 (gmt 0)

If you dont want that anchor to use the properties of that class, why cant you change the class?

If you dont want to change the class you could give it a 2nd class or use the h1 as a selector...

h1 a.test{cancel styles and add styles so its the same as h1tag}

a.newclass(cancel styles....}

irubin

11:27 pm on Jul 22, 2003 (gmt 0)

what do you mean by a.newclass(cancel styles....}

is that the same as class test?

Reflection

11:38 pm on Jul 22, 2003 (gmt 0)

Ok lets see if I understand here...

You dont want your a.test to inherit the styles of your normal anchors?

Or is a.test used in other places and you just want the anchor(s) that appear in an H1 tag to be the same style as h1 text?

irubin

11:54 pm on Jul 22, 2003 (gmt 0)

You dont want your a.test to inherit the styles of your normal anchors?

thats exactly it. So if I was to have h2 tags, the link inside the tag would not inherit any style and simply take the style of h2.

I hope this makes sense.

Thanks again.

SuzyUK

8:36 am on Jul 23, 2003 (gmt 0)

irubin

firstly there is an error in your CSS
a.bold { font : bold 8pt Verdana; color : #000000; text-decoration:underline; }
a:hover.bold { font : bold 8pt Verdana; color : #626B21; text-decoration:none; }

should be a.bold:hover the psuedo class(hover in this case) should always be added at the end after any class names or ID's.

I realise that's not your question here though ;)

If you remove the font-size and family from your links (they should inherit from the surrounding text) You could apply the font size/family to the <body>, <div> <p>..etc not the anchors themselves.

then without even adding a classname inside your <h1> or <h2> tags they will inherit the size/family from them. If you also want to change the colors, decoration or hover effects from links inside these tags. You still do not need a extra class name just be sure to target them a little more specifically..

To specifically target the ones inside your heading tags try this:

body {font-size: 8pt; font-family: verdana;} /* put this on the parent element, I just used body for this example */
a { color : #000000; text-decoration:underline; }
a:hover { color : #993300; text-decoration:none; }
h1 a, h2 a {color : #000000; text-decoration:none; }
h1 a:hover, h2 a:hover { color : #993300; text-decoration: underline; }
HTML:
<p>this is a <a href="foo.htm">sample</a> link</p>
<h1>this is a <a href="foo.htm">sample</a> link</h1>
<h2>this is a <a href="foo.htm">sample</a> link</h2>

I swapped the underlines for testing..
as long as you re-define all the rules that you had in the general anchor style you are in effect cancelling it out, the font-size and family will inherit from their parents.

If you want to leave the decoration the same you wouldn't need to re-define it as it will inherit from the general anchor style.

So instead of cancelling inheritance (which goes against CSS) then you are using it and the code is smaller too ;)

Suzy
<added>HTML code</added>

DrDoc

2:48 pm on Jul 23, 2003 (gmt 0)

In other words... There's no way to say "apply this rule to all anchor tags that are not inside a h1 or h2 tag" in CSS.

marek

3:34 pm on Jul 23, 2003 (gmt 0)

irubin, seems to me that you want to enable inheritance, not to cancel it:

h1 a {
font-family: inherit;
font-size: inherit;
/* etc. */
}

DrDoc

4:29 pm on Jul 23, 2003 (gmt 0)

Is there anyway to cancel all styles for that particular link, so that it stays within the same style as the h1 tag?

So, technically, inheriting from the h1 should work... Or do the link rules override the inheritance?