SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 35 of 35
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    p.first is a class of .first attached to the p element and not a pseudo class. You don't have an element with a class of .first so it will never be matched anyway

    Here is an example that clearly shows first-child working in IE7 and above:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
    <style type="text/css">
    .content{
        background:red;
        padding:1px 0;
    }
    .content p {
        margin: 15px 0 0;
        font-size: 90%;
    }
    .content p:first-child {
        margin-top: 0;
        font-size: 110%;
    }
    </style>
    </head>
    <body>
    <div class="content"> 
        <p>Yiannis Tsapatori is one of the most talented and renowned hair ....</p>
        <p>His magical hands have transformed a range of known and unknown...</p>
        <p>Yiannis was born a hairdresser and was......</p>
        <p>With his weapons... </p>
        <p>Yiannis Tsapatori now lives and works in New York.</p>
    </div>
    </body>
    </html>

  2. #27
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul bet me to it.

    But...


    Also, .content p:first-child, means p should be the first child of the parent, and it would require something like this:
    Code:
    <div class="content">
    <p>Yiannis Tsapatori is one of the most talented and renowned hair ....</p>
    and .content img p:first-child something INVALID like this: p to be a child, even more, the first child, of the EMPTY img element.


    donboks, you look a little tired and overused on this one. You may not be thinking clearly enough.

  3. #28
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by noonnope View Post
    Also, .content p:first-child, means p should be the first child of the parent, and it would require something like this:
    Code:
    <div class="content">
    <p>Yiannis Tsapatori is one of the most talented and renowned hair ....</p>
    Another option to consider would be .content p:first-of-type, which matches the first paragraph within an element of class="content", even if there are other things (like images) that come before it.

    The downside? Yup, you've guessed it, our old friend IE
    It doesn't work in IE8 or below. The compat chart doesn't show IE9 yet so I can't say whether it will work there. Apart from that, it's fine and funky in Firefox 3.5, Safari 3.1, Opera 9.5 and Chrome 2.0.

  4. #29
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by noonnope View Post
    Paul bet me to it.

    Also, .content p:first-child, means p should be the first child of the parent, and it would require something like this:
    Thanks, I meant to say something about that but got distracted

    The other alternative which was mentioned earlier in the thread would be to do this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
    <style type="text/css">
    .content{
        background:red;
        padding:1px 0;
    }
    .content p {
        margin-top: 0;
        font-size: 110%;
    }
    .content p + p {
        margin: 15px 0 0;
        font-size: 90%;
    }
    </style>
    </head>
    <body>
    <div class="content"> 
        <div><img src="img.gif" alt="" width="500" height="10" /></div>
            <p>Yiannis Tsapatori is one of the most talented and renowned hair ....</p>
        <p>His magical hands have transformed a range of known and unknown...</p>
        <p>Yiannis was born a hairdresser and was......</p>
        <p>With his weapons... </p>
        <p>Yiannis Tsapatori now lives and works in New York.</p>
    </div>
    </body>
    </html>
    That will work from IE7 and up but does depend on structure being as above.

  5. #30
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have to agree with noonnope
    donboks, you look a little tired and overused on this one. You may not be thinking clearly enough.
    It was obviously tiredness. I took my oh so needed sleep and everything is working fine now:
    Code CSS:
    .content p {
        margin-top: 0;
        font-size: 110%;
    }
    .content p + p {
        margin: 15px 0 0;
        font-size: 90%;
    }
    Thank you all for the patience

    @Paul O'B I hope everything went well over the weekend
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  6. #31
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:


    Quote Originally Posted by donboe View Post

    @Paul O'B I hope everything went well over the weekend
    Yes fine thanks - recovering well now.

  7. #32
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This code
    Code:
    .content p {
        margin-top: 0;
        font-size: 110%;
    }
    .content p + p {
        margin: 15px 0 0;
        font-size: 90%;
    }
    bugs me, and it may seem like I'm not consistent, since I advocate the drop of IE6- exactly for this reason: the ability to use selectors like +.

    But in this case I believe it's not a good option, when it comes to fast and efficient. The adjacent sibling selector, I think, it's not put to a good use in a situation like this.

    A class targeting that first p would be far more fitted here:

    Code:
    .content p {
        margin-top: 0;
        font-size: 110%;
    }
    .content p.firstPar {
        margin: 15px 0 0;
        font-size: 90%;
    }
    Off Topic:

    Good health to you, Paul, it seems you need it!
    Have a speedy revovery.

  8. #33
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:

    Good health to you, Paul, it seems you need it!
    Have a speedy revovery.


    Thanks Μitică

  9. #34
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    This code
    Code:
    .content p {
        margin-top: 0;
        font-size: 110%;
    }
    .content p + p {
        margin: 15px 0 0;
        font-size: 90%;
    }
    bugs me, and it may seem like I'm not consistent, since I advocate the drop of IE6- exactly for this reason: the ability to use selectors like +.

    But in this case I believe it's not a good option, when it comes to fast and efficient. The adjacent sibling selector, I think, it's not put to a good use in a situation like this.

    A class targeting that first p would be far more fitted here:

    Code:
    .content p {
        margin-top: 0;
        font-size: 110%;
    }
    .content p.firstPar {
        margin: 15px 0 0;
        font-size: 90%;
    }
    Off Topic:

    Good health to you, Paul, it seems you need it!
    Have a speedy revovery.
    Maybe I misunderstand you than? Because I'm targeting the first <p> right now the way I want it. The first <p> has no top margin and all others(it's not just one) have a top margin of 15px!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  10. #35
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm the one getting lost. Maybe I need some sleep too.

    It should go like this:
    Code:
    .content p {
        margin: 15px 0 0;
        font-size: 90%;
    }
    
    .content p.firstPar {
        margin-top: 0;
        font-size: 110%;
    }
    Using firstPar, a class, means two steps:
    1. Global action: All p in content will have a 15px top margin assigned and a 90% font size.
    2. Single corrective action: Only one p having firstPar class will be given 0 instead of 15px on that top margin, and 110% font size instead of 90%.

    Using p+p, adjacent sibling selector, means more steps:
    1. Global action: All p in content will have a 0 top margin assigned and a 110% font size, as opposed to just one p, the one we need.
    2. Repetitive corrective sequence: every p having a sibling p will have its properties modified to: 15px margin top instead of 0, and a 90% font size instead of 110%.

    I'm not sure if the browsers actually apply and then correct, like the CSS describes, I suspect not, but it will take longer to decide which property from which selector takes precedence. Milliseconds, or even less, it doesn't matter. The principle of optimization applies still. I never test it, but it seems like that.


    I use + selector in scenarios when there aren't so many possible matches, in fact, I use it when I'm sure there is but one match, possibly occurring several times though, and in my experience it has to do more with classes than it has to do with the elements.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •