+ Reply to Thread
Results 1 to 4 of 4

Thread: can somebody explain this to me

  1. #1
    diabolo's Avatar
    diabolo is offline Community Advocate diabolo is on a distinguished road
    Join Date
    Nov 2007
    Location
    Jersey Shore
    Posts
    1,683

    can somebody explain this to me

    http://www.webmasterworld.com/forum83/100.htm
    p + p { margin-top: 0.5em; }
    The first one sets the top margin of all paragraphs to 1/2 space (more or less). The second one does that for only paragraphs that follow other paragraphs (i.e., it doesn't set the margin of the first paragraph on the page, or the first paragraph in a section).
    I've been around CSS for quite a while, and I have never seen anything like p + p

    is it a legit css, is so, can somebody link/tell me more about it

  2. #2
    saif7463 is offline x10Hosting Member saif7463 is an unknown quantity at this point
    Join Date
    Jun 2008
    Posts
    30

    Re: can somebody explain this to me

    It is valid CSS.

    CSS has 'selectors' which essentially let you do pattern matching for styling an element. See http://www.w3.org/TR/CSS2/selector.h...ttern-matching

    As it states, "E +F Matches any F element immediately preceded by a sibling element E." Therefore in your example, every <p> that is preceded by a <p> will have a margin of .5em. Effectively, you are adding more space between paragraphs.

  3. #3
    misson is offline x10 Spammer misson is a jewel in the rough
    Join Date
    Mar 2008
    Location
    Libertatia
    Posts
    2,506

    Re: can somebody explain this to me

    To expand on saif7463's answer, the '+' is called the adjacent sibling combinator (CSS 2.1, section 5.7). Support for it was added to IE7. Other browsers have supported it for awhile.
    Last edited by misson; 08-30-2009 at 11:51 PM.
    Be sure to read all pages linked in this post; they have further information that should prove useful. When asking for help, make sure you follow Eric Raymond's and Jon Skeet's guidelines for prompt, accurate responses. Please answer any questions I ask; they're not rhetorical (probably). Any posted code is intended as illustrative example, rather than a solution to your problem to be copied without alteration. Study it to learn how to write your own solution.
    Misson, not Mission.

  4. #4
    descalzo's Avatar
    descalzo is offline Grim Squeaker descalzo has a brilliant futuredescalzo has a brilliant futuredescalzo has a brilliant future
    Join Date
    Jul 2009
    Location
    Ankh-Morpork
    Posts
    7,636

    Re: can somebody explain this to me

    HTML Code:
    <div>
     
    <p> nothing added here </p>
     
    <p> this has 0.5em top margin </p>
     
    <p> so does this</p>
     
    <span>not a paragraph, no added margin</span>
     
    <p>not adjacent sibling, no added margin</p>
     
    </div>
     
    Last edited by descalzo; 08-31-2009 at 02:28 PM.
    Nothing is always absolutely so.

+ Reply to Thread

Similar Threads

  1. explain please
    By galaxyAbstractor in forum Programming Help
    Replies: 4
    Last Post: 02-16-2009, 09:26 AM
  2. Replies: 1
    Last Post: 08-10-2008, 10:03 PM
  3. Please explain this installation of ASP in Apache2triad...
    By anuj_web in forum Scripts & 3rd Party Apps
    Replies: 0
    Last Post: 06-13-2008, 05:23 AM
  4. Please explain this in simple english
    By galaxyAbstractor in forum Off Topic
    Replies: 1
    Last Post: 12-14-2007, 01:49 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
x10hosting free hosting for the masses
dedicated servers