PDA

View Full Version : CSS syntax


fwr1000
08-09-2007, 10:04 PM
Question on which is best (or correct) way for a contextual selector. Have a class for example .content

I've seen code both ways

.content h1 {color: #659a02
}

h1 .content {color:#659a02
}


Are these the same, different, one way wrong?

Thnx
Fred

gmcrone
08-10-2007, 07:11 AM
Question on which is best (or correct) way for a contextual selector. Have a class for example .content

I've seen code both ways

.content h1 {color: #659a02
}

h1 .content {color:#659a02
}


Are these the same, different, one way wrong?

Thnx
Fred

They are 2 different things.
The first one is normally what you would use for any H1 inside a div called content.
The second one is not really a standard way of writing CSS although it may still work.

Mike....

d a v e
08-10-2007, 09:03 AM
"The second one is not really a standard way of writing CSS although it may still work."

are you sure?! according to the spec for descendant selectors that would seem to be perfectly valid, if not actually that useful unless you applied the .content class as a span within the heading ;)

domedia
08-10-2007, 02:44 PM
What Mike meant is that it's not normal for CSS writers to use that approach, although technically completely valid.

fwr, here 2 examples for each CSS line, this goes back to CSS logic, and how CSS works:

<style type="text/css">
<!--
.content h1 {color: #659a02}
-->
</style>
<!-- points to any h1 inside any element with the class name 'content': -->
<div class="content">
<h1>Header</h1>
</div>


<style type="text/css">
<!--
h1 .content {color:#659a02}
-->
</style>
<!-- points to any element with the class name content inside a h1 tag:-->
<h1>
<div class="content">Header</div>
</h1>

d a v e
08-10-2007, 06:51 PM
i wondered whether that's what he (Mike) meant :)

Cary
08-11-2007, 07:41 AM
Question on which is best (or correct) way for a contextual selector. Have a class for example .content

I've seen code both ways

.content h1 {color: #659a02
}

h1 .content {color:#659a02
}

Something else you might see is this:

h1.content {color:#659a02;}

Notice there's no space between h1 and the class name.

This would be used to apply to any h1 element with that class name.

<h1 class="content">Header</h1>

gmcrone
08-11-2007, 08:00 AM
i wondered whether that's what he (Mike) meant :)

YES

Mike...