#1
  1. EXOH
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Nov 2004
    Location
    corner of methadone and disillusionment
    Posts
    1,039
    Rep Power
    55

    Tag.class or class p


    In CSS, which would be more appropriate (or I suppose semantically correct) to use, p.text or .text p? P representing the <p> tag, and "text" representing the class "text".

    Any info or links to pages with info on this matter would be greatly appreciated!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2003
    Posts
    1,754
    Rep Power
    69
    that all depends on how your code works. Two ways...

    Code:
    <div class="text">
       <p>text here</p>
       <p>text here</p>
    </div>
    or

    Code:
    <div>
       <p class="text">text here</p>
    </div>
    The point im making is depends how often and where the <p> tag occurs that you want to apply this style to. If you put it on the p tag then you have to put it on every p tag you want the style. If you have mulitple <p> tags in a division like above then have the class on the div makes more sense

    Comments on this post

    • Kravvitz agrees
  4. #3
  5. EXOH
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Nov 2004
    Location
    corner of methadone and disillusionment
    Posts
    1,039
    Rep Power
    55
    Err, I really don't know what you mean...

    If you have

    .mainNav p

    That will control the paragraph inside mainNav. If you have

    p.mainNav

    What does that control?
  6. #4
  7. Anal Purist
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2005
    Location
    Bob's Auto Parts...
    Posts
    829
    Rep Power
    85
    The latter (p.mainNav) is just a way of selecting that class or children within that class. Defining selectors like this is good for addressing specifics.
    EG:
    Code:
    /*css*/
    p.mainNav img {
      margin: 0;
      border: 0;
    }
    <!--HTML-->
    <p class="mainNav">Blah blah blah <img src="blah/blah.gif" alt="Blah"> blah blah blah.</p>
    Here, we have made sure that the <img> within <p class="mainNav"> has no margin or border, but this rule won't apply to any <img> element unless it's a child of "p.mainNav".

    Hope that was clear? I seem to be rambling incoherently today

    Comments on this post

    • jmeeter agrees
    We are troll foldy-rolls and we'll eat you for our supper.
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    With a bit less rambling , p.mainNav selects only paragraphs that are of class="mainNav", i.e., <p class="mainNav">.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  10. #6
  11. EXOH
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Nov 2004
    Location
    corner of methadone and disillusionment
    Posts
    1,039
    Rep Power
    55
    Originally Posted by Grafmix
    The latter (p.mainNav) is just a way of selecting that class or children within that class. Defining selectors like this is good for addressing specifics.
    EG:
    Code:
    /*css*/
    p.mainNav img {
      margin: 0;
      border: 0;
    }
    <!--HTML-->
    <p class="mainNav">Blah blah blah <img src="blah/blah.gif" alt="Blah"> blah blah blah.</p>
    Here, we have made sure that the <img> within <p class="mainNav"> has no margin or border, but this rule won't apply to any <img> element unless it's a child of "p.mainNav".

    Hope that was clear? I seem to be rambling incoherently today
    Thanks, that helped a lot. :]

IMN logo majestic logo threadwatch logo seochat tools logo