1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Advanced Selecting

Discussion in 'CSS' started by t.sealey, Jan 7, 2008.

0
  1. #1
    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):

     
    t.sealey, Jan 7, 2008 IP
    Daniel591992 likes this.
  2. t.sealey

    t.sealey Peon

    Messages:
    110
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I should've used a list but thought Id make it simple :)
     
    t.sealey, Jan 7, 2008 IP
  3. Daniel591992

    Daniel591992 Well-Known Member

    Messages:
    594
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    125
    #3
    Thanks for making this. I never knew you could use something like this (#article p + p + p ) in CSS
     
    Daniel591992, Jan 7, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.
     
    Stomme poes, Jan 8, 2008 IP
  5. buckmajor

    buckmajor Active Member

    Messages:
    574
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #5
    True!! So it doesn't work in IE6. Is there a way to work around it with Stomme?

    Many thanks in advance.
     
    buckmajor, Jan 9, 2008 IP
  6. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #6
    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).
     
    soulscratch, Jan 9, 2008 IP