IDs and elements...

liunx

Guest
Hi,

To follow on from an earlier thread...
I have an ID and I want the element to do different things in that id..

Example:

p { font-weight: normal; font-variant: small-caps }
#mainblock { width: 50% }
#mainblock p { font-variant:normal; font-style: italic }


That is just an example. I would like to know if you can have multiple of that sort. I had messed about with

#mainblock p {}
#mainblock p:first-letter {}

But for some reason even without the mainblock on the html page it still styled the p:first-letter

Is this the same thing and you can only style the sub part of the id once (first line) then all the rest are ignored/set to defaults...
Does this mean that to create the "id/class element" multitimes you need to have loads of classes in the html to use?

Have I lost ppl ?
;)

VinceYou could go with assigning more than one rule to an element

<style>
.s1{color:blue}
.s2{font-weight:bold}
.s3{font-style: italic; text-decoration:underline}
</style>

<P class="s1">Hello</P>

<P class="s1 s2">World</P>

<P class="s1 s2 s3">Oh, I there</P>Yes, it would style and <p> element if the #mainblock was missing whereas with the #mainblock p it would only style <p> elements that were children of #mainblock and the last statement on the list has more priority.Originally posted by Robert Wellock
Yes, it would style and <p> element if the #mainblock was missing whereas with the #mainblock p it would only style <p> elements that were children of #mainblock and the last statement on the list has more priority.

Hmmmm I know thats what its meant to do, that was what I wanted it to do.

However....

On my page weird things started to happen, possibly clashing rules, but.

I tried to style <p>. As in the example way up top, I wanted the first character to be larger and bold. Then I tried to use a class on the <p> to have whatever was in the <p> bold, and small caps and a border (so I can see what its affecting). It put the border around only the first character and changed that.


MR J
Cheers, I think I'll prolly use that method. I have a feeling I am using CSS semi properly, its close but I am still defining too much lol :)

Cheers for the ideas/help :)
 
Back
Top