Put this together for all you people who are divitus. There is no need for a million different div's/classes. Basic but you should get the idea. css is linked from test.css which I included 1 Div, 1 Element ID, and 7 different targets. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <div id="article"> <p>1 Text Yellow</p> <p>2 Text Red</p> <p>3 Text Blue</p> <p>4 Text Grey</p> <p>5 Text Purple</p> <p>6 Text Brown</p> <p>1 Div and CSS selects 7 different elements</p> </div> </body> </html> HTML: /* 1 Div, 1 Element ID and 7 targets Email: t.sealey86@gmail.com */ #article { position:relative; top:100px; margin:auto; padding:auto; width:800px; } p{ position:relative; font-weight:bold; float:left; padding:18px; } #article > p { color:#FFFF00; } #article p + p { color:red; } #article p + p + p { color:blue; } #article p + p + p + p { color:#666666; } #article p + p + p + p + p { color: #CC00CC; } #article p + p + p + p + p + p { color:#666600; } #article p + p + p + p + p + p + p { position:relative; top:20px; left:22%; margin:auto; padding:auto; text-align:center; color:#FF9900; } Code (markup):
Well, you can, but the reason you never see ++ or >> is because IE6 doesn't know what those mean. They're currently useful only if you want to pass certain values to all browsers but IE6.
True!! So it doesn't work in IE6. Is there a way to work around it with Stomme? Many thanks in advance.
I get what you're trying to say, because most people's CSS is piss poor with redundant rules, but here are a few quirks in your example: 1. Padding does not accept a value of auto. Please check the specs @ http://www.w3.org/TR/REC-CSS2/box.html#padding-properties. And even if it did, it would be a redundant/useless rule since divisions usually have top and bottom margins from the default rules of a browser 2. Relative/Absolute positioning for layout is BAD. BAD BAD. Never rely on it unless it's aligning an element at the top somewhere, because it comes later in the source code. You could have avoided typing out two rules by using margin instead. Ex: margin:100px auto 0; Less bloat. 3. You're making all your paragraphs float, yet you are NOT containing floats in modern browsers (width triggers hasLayout in MSIE so it's fine there) but no overflow:hidden or clearfix on your wrapper. That means if you add an image or a border, it will be 1-2 pixels tall, because #article is not holding floats (add any element after the end of the article division, and you'll know what I mean). 4. Yes, it would have been better if you had used a list instead of paragraphs since it's not semantically correct in this example. 5. In the real world, MSIE6 has the most market share out of any browser. This means that adjacent sibling selector and child selector rules that you have will be useless. On a personal development blog, it wouldn't matter because most of your audience would not be on IE6.. but on big, big site it would be a horrible idea. 6. You have a fixed width container, yet you're using percentages as a value for left (#article p+p+p+p+p+p+p). This would have made more sense if you used pixels. Pixels with pixels, Percentages with percentages. No headaches. Also, margin:auto; is there by default for any paragraph - so that declaration is useless, and again auto is not a valid value for padding. Since you're all into not being redundant and not wasting bytes, you should also use shortcase hexadecimal notation, #FF9900 becomes #f90. I pray no one ever designs something as inconsistent as this, with varying blocks of text floating next to each other. But if I had no other choice but to code this, then I'd probably would be forced to use id/class to get the colors in there, since most of my clients use IE6. Oh and, you should always use a universal reset even if it's a simple example. And, it's better to be consistent with your property values.. why mix keywords for color and hexadecimal values? red, then blue, then hex # for gray? be consistent. I wouldn't use DW8. I assume this, because of the default 'Untitled Document' that's always there. Bloated ass program. It's good to use a media attribute for your link elements, so you know exactly what media will pick them up (and print styles won't look screwy).