SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict ibeblunt's Avatar
    Join Date
    Jan 2001
    Location
    Jersey City, NJ
    Posts
    312
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is This Possible In CSS?

    Let's say you have 10 paragraphs all using the standard P tag.

    Is there a way to make the FIRST set of P tags one style and the rest of the tags another style?

    Example:

    Paragraph 1

    Paragraph 2

    Paragraph 3

    Paragraph 4
    <///////~

    www.sohh.com

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #containerDiv:first-child {
       blah;
       }
    if your xHTML is :
    Code:
    <div id="containerDiv">
       <p>Content to be styled differently.</p>
       <p>blah</p>
       <p>blah</p>
    </div>
    Not sure if it works in IE though.

    ~DB

  3. #3
    SitePoint Enthusiast DiDoKa's Avatar
    Join Date
    Oct 2003
    Location
    MA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, but not without giving them classes.

  4. #4
    SitePoint Addict ibeblunt's Avatar
    Join Date
    Jan 2001
    Location
    Jersey City, NJ
    Posts
    312
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DiDoKa
    yeah, but not without giving them classes.
    Can you explain?
    <///////~

    www.sohh.com

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You would have to create a class, put all the styling you want for the first paragraph in there, then add the class to the paragraph you want to be styled.

    Or, you could use first-child.

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    The most reliable way to do it is like so:
    Code:
    p {
      font-size: small;
    }
    p.first {
      font-size: large;
    }
    HTML Code:
    <p class="first">This is the first paragraph.</p>
    <p>This is another paragraph.</p>

  7. #7
    SitePoint Enthusiast DiDoKa's Avatar
    Join Date
    Oct 2003
    Location
    MA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, i guess you got your explanation, sorry for not explaining it further.

  8. #8
    SitePoint Addict ibeblunt's Avatar
    Join Date
    Jan 2001
    Location
    Jersey City, NJ
    Posts
    312
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See, I have a CMS that has about 5,000 articles in it. They are all plainly formatted. What I'm trying to avoid is adding class tags to the first <p> in every article. That could be a lot of work.

    I tried the example that DeeBs gave, but it doesn't seem to work in IE 6.
    <///////~

    www.sohh.com

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I tried the example that DeeBs gave, but it doesn't seem to work in IE 6.
    No it isn't supported in Ie6 i'm afraid so Vinnies way is the only reliable way at present.

    Paul

  10. #10
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul...what about IE5+ Mac? Thanks, Tantek.
    ::: certified wild guess :::

  11. #11
    SitePoint Enthusiast DiDoKa's Avatar
    Join Date
    Oct 2003
    Location
    MA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ibeblunt
    See, I have a CMS that has about 5,000 articles in it. They are all plainly formatted. What I'm trying to avoid is adding class tags to the first <p> in every article. That could be a lot of work.

    I tried the example that DeeBs gave, but it doesn't seem to work in IE 6.
    To tell you the truth, I would probably avoid that too, unless there is a comfortable way in that cms to have a nice code view and I can edit it from there. It all depends on what paragraphs need to be styled differently and for what reason.

  12. #12
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by adios
    Paul...what about IE5+ Mac?
    :first-child does work there

  13. #13
    SitePoint Evangelist N9ne's Avatar
    Join Date
    Aug 2002
    Location
    UK
    Posts
    596
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE6 is hopeless when it comes to the fancier CSS features. I doubt it will ever support first-letter, first-child, etc. unfortunately .

    I do wish it did though, would not only save a lot of time, but would allow more creativity while maintaining the usage of CSS .

  14. #14
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by N9ne
    IE6 is hopeless when it comes to the fancier CSS features. I doubt it will ever support first-letter, first-child, etc. unfortunately .
    IE/Win has supported :first-letter, :first-word, and :first-line since version 5.5. There are fancier things that it doesn't support, like :after or :first-child, but the 3 I mentioned have been working for years.
    Quote Originally Posted by N9ne
    I do wish it did though, would not only save a lot of time, but would allow more creativity while maintaining the usage of CSS .


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
  •