Preserved Topic: CSS Question

I didn't know where else to post this so I posted it here.
I have ran across this a few time but I am not sure what it does:
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}

I know that it is an ID tag that has been called "Content" but I am not sure what the
">" has to do with the paragraph tags or what "p+p" even is.

~Also:

Is there a way to simply say that every Paragraph tag that is within a certain ID or CLASS contains specific details as to font, color, etc...
For example: If I have a menu on the right side called "SideNav", is there a simple way to say that every <P> tag contains specific formats so I can just script the HTML as:

<div ID="SideNav>
<p>My text here will be formated according to the external CSS</p>
</div>

Now keep in mind that I may have different background colors and margins for the <p> tags so I can't just put it all in the #SideNav tag.

Thanks,
C:\

I think you have the answer to your second question in the first part. It is all to do with CSS2 child selector properties (which come in useful for the IE/Win CSS hack: see glish.com/css) for example this says if the body tag is the child of the html tag (as it always is if you've coded correctly) then the style is:

html>body {
}

so your first bit of code says if the P tag is a child of ID #Content then it has these styles.

See: http://www.w3.org/TR/REC-CSS2/selector.html#child-selectors

I believe the second piece of code (an example of adjacent sibling selectors) says something like if the P tag is immediately preceeded by another P tag which is a child of the ID #Content then it has this style.

See: http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors

I'm not up to full speed on everything CSS2 related and these kind of selectors are something I need to know more about (along with aural styles) but I think that is right (if not someone will jump in an correct me).

There is a handy translator around that allows you to paste in the CSS and it will tell you what it means. I don't have the URL here but someone should be able to drop it in.

Emps

Thanks Emp! The #Content>p+p was really confusing me. If you do come across the URL of the translator please let me know, I know that this will come in handy since I am re-doing my site in all CSS.

Thanks,
C:\

I should have also said that there is a CSS forum over at the sister site:
http://www.gurusnetwork.com/cgi-bin/ubb/ultimatebb.cgi?ubb=forum&f=16

I can't find that link (I had a bit of a search on Google to no avail) but I'll either track it down or someone will drop it in here I'm sure.

Emps

Isn't it always the way. I pressed the button to submit the reply while nosing around the WaSP website in another window and, as I should have predicted, they had the link:
http://gallery.theopalgroup.com/selectoracle/

And this is what it had to say about the two styles you were asking about:

quote:

---

Selector 1: *#Content > p
Selects any p element that is a child of any element with an id attribute that equals Content.
Selector 2: *#Content > p + p
Selects any p element that immediately follows a p element that is a child of any element with an id attribute that equals Content.

---

Emps

OK I must be either not understanding how this works or I am doing something wrong.
Here is what I am doing:

I have a CSS sheet with:

#Content{
background-color: #670000;
margin: 10px 50px 10px 50px;
}

#Content>p{
font-family: Arial;
font-size: 10pt;
font-weight: bold;
}


Now in the HTML I have:

<div id="Content">
<p>This is a <p> tag in the Content ID</p>
</div>

The way that I understand it is that the <p> tag within this <div> tag will have the Arial font, size 10pt and be bold. But it doesn't show this in the browser. Are there certain properties that are not able to be used in this, or do I just have the wrong idea of this?

Thanks,
C:\

As a far as I can tell that looks like it should work - the problem might be with the browser you are using as I believe this only works in NS6+, Op5+, IE5/Mac (I may be wrong on some of these) - it won't work in IE5/Win. Try testing it in a couple of browsers or if its online you could put the URL here and we'll have a look at it.

Emps

I thought that I was loosing it there for a while. Here is how I fixed it:

Change this:
#Content{
background-color: #670000;
margin: 10px 50px 10px 50px;
}

#Content>p{
font-family: Arial;
font-size: 10pt;
font-weight: bold;
}


To this:
div.Content{
background-color: #670000;
margin: 10px 50px 10px 50px;
}

div.Content p{
font-family: Arial;
font-size: 10pt;
font-weight: bold;
}


Since I am putting most of my content in <div> and <span> tags this works out OK. Thanks for all your help and the links EMP!

C:\

Glad I could help (its also helped my straighten a few things out too). The second, working version is more along the lines of the way I'd have done things as I rarely use id instead of class (you can also safely leave out the div bit before the class) - it looks like I'll have to familiarise myself with the CSS2 selectors more as there must be places where they are better than the CSS1 way but clearly not in this case.

Emps

just for the record - you can still use the id method, you just need to use a space rather than the '>' like you did for the class example.

I generally use an even mix of class/id definitions...depending on the purpose of the element.