Forum Moderators: not2easy
I'm having fun with CSS at the mo - got a website to design from scratch, so I'm doing a CSS-Zen garden thing and using the same HTML files but only changing the CSS file. Got 2 designs done so far...3 more on the way!
My problem is this.
I have a number of paragraphs on my page.
For example...
<p>Contents of the first paragraph</p>
<p>...and the second</p>Simple stuff.
Now - I want to apply a style to these P tags, but make the style alternate...so the first paragraph will, for instance, be in blue, the second in red, then the third in blue again...and so on.
Is there any way, using posh CSS-trickery that I can do this, without changing the HTML at all?
A simple 'No' will do if I can't!
Cheers,
B
A simple style tag inside the P tag should achieve what you want :)
[w3.org...]
(Don't expect any browsers to actually support this yet though).
Cheers for the responses...I guess I'll scrap my alternate P plans for now...and wait a couple of decades 'til I can actually do it properly!
B
nth-childA lot of people, esp. in tabular data, want to have every second row coloured a different way. The way we do it is assigning a class to every second row. Or using javascript/some other scripting method to do it?
What about an
:odd-child:odd-child-of-type:even-child:even-child-of-typeWouldn't those be awesome pseudo-selectors?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test template</title>
<style type="text/css">
p {color:green;}
p+p {color:red;}
p+p+p {color:green;}
p+p+p+p {color:red;}
</style>
</head>
<body>
<p>green</p>
<p>red</p>
<p>green</p>
<p>red</p>
</body>
</html>In all conforming CSS browsers - in other words, not IE. ;)
Otherwise, you just add a
class
..but how would one, say cover odds and evens?
...from the CSS3 spec...
tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd) /* same */
tr:nth-child(2n) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */
...how cool is that!
Just as a rough estimate, anyone got any idea when this sort of thing will be implemented in browsers?
B
Just as a rough estimate, anyone got any idea when this sort of thing will be implemented in browsers?
Considering that IE still isn't even implementing all of CSS 2.1 (min-width anyone?), I wouldn't hold my breath. This is probably still another 5 - 10 years out with the snails pace that Microsoft moves at.
.red {color:red;}
.salmon {color:salmon;}
<p class="red">here's some red text.</p>
why not just create a class for each color you want
I could, but I really want to do this without changing the HTML at all, ie, through CSS alone.
And the CSS probably never will be supported by IE properly.
</cynic>
.red {color:red;}
.salmon {color:salmon;}<p class="red">here's some red text.</p>
I think it may be best to declare class names that are separate from the style (separating style and content blah blah), in case you later want to change the colour then it still makes sense, ie:
.odd {color:red;}
.even {color:salmon;}<p class="odd">here's some odd text, it maybe red, maybe not.</p>
CSS:
p {color:red;}
.second {color:salmon;}HTML:
<p>standard style (red text)</p>
<p class="second">alternate style (salmon text)</p>
