SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: <p> inside <p>

  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    <p> inside <p>

    hi all

    although <p> and <div> both are block level elements.

    then why
    1) <p> inside <p> cannot accepts any styles.
    2) <p> inside <div> accepts all styles

    if i want to apply styles on a <p> that is inside another <p>, then whats the solution

    here is my example which doesnt applied styles to <p> inside <p>
    Code:
    <!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=iso-8859-1" />
    <title>Document</title>
    <style type="text/css">
    p{
    margin:0px;
    padding:0px;
    background-color:#FF0000;
    }
    p p{
    margin:0px;
    padding:0px;
    background-color:#ffff00;
    font-size:24px;
    }
    #divhel p{
    font-size:30px;
    }
    </style>
    </head>
    
    <body>
    <p>hellow how are you</p>
    <p><p>hello how are you</p></p>
    <div id="divhel"><p>hellow how are you</p></div>
    </body>
    </html>
    vineet

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    You cannot nest P elements it is illegal. The P element represents a paragraph. It cannot contain block-level elements (including P itself). DIV however is a generic container where content can be inline e.g SPAN or block-level. Hence DIV can contain P but not the other-way around.

  3. #3
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This makes sense semantically too if you relate it in the real world. When do you ever open a book and see a paragraph within a paragraph?

  4. #4
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you may want to do is this:

    <p>hellow how are you</p>
    <p><span>hello how are you</span></p>

    Use the span element and style that.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,820
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by sdt76 View Post
    What you may want to do is this:

    <p>hellow how are you</p>
    <p><span>hello how are you</span></p>

    Use the span element and style that.
    If the span is wrapped around the entire content of the paragraph like that then it is an unnecessary tag since you can just apply a class to the paragraph to give it a different style and may not even need that once the CSS3 selectors are all supported.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah but if it does not contain all the content, then you would wrap it in a span. The way I understand his question is that he wants a certain section within his paragraph to behave a certain way but not the entire paragraph.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,820
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    For styling part of a paragraph different from the rest you'd use

    <p><span>hello</span> how are you</p>

    Wrapping all the content of the paragraph inside a span wouldn't allow you to style part of the paragraph differently from the rest.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's what the span element is for. What I understood is that he wanted part of the paragraph to be a certain text size and was attempting to do that by nesting another paragraph element and styling it differently.


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
  •