#1
  1. No Profile Picture
    Contributing User
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Dec 2004
    Posts
    3,082
    Rep Power
    381

    Adjacent selectors p+p.. css of first p affecting second p?


    i have two p tags one after the other..

    <p>text</p>
    <p>text</p>

    and I did:
    Code:
    #head p {
            float:left;
            margin-top:2%;
            font-style:oblique;
            font-size:150%;
            color:green;
        }
      #head p+p {
            float:right;
            font-size:75%;
            color:red;
       }
    the problem is that if i do margin-top:4% to the first p; this also changes that in the adjacent p? is this correct?
  2. #2
  3. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Posts
    4,200
    Rep Power
    2012
    Why not test it and see what the result will be?
    Remember to test with several browser, IE is not that happy with standards.

    it is possible to set p+p with its own margin-top.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Dec 2004
    Posts
    3,082
    Rep Power
    381
    lol.. i did say it also changes that in the adjacent p.. and asked if that was the correct behaviour?

    because p+p is just me selecting the adjacent selector.. so it shouldnt "link" with the first p in terms of styles?

    yeah I did give the adjacent its own margins etc.. but really I dont think I should as reason mentioned above
  6. #4
  7. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Posts
    4,200
    Rep Power
    2012
    Originally Posted by paulh1983
    lol.. i did say it also changes that in the adjacent p.. and asked if that was the correct behaviour?

    because p+p is just me selecting the adjacent selector.. so it shouldnt "link" with the first p in terms of styles?

    yeah I did give the adjacent its own margins etc.. but really I dont think I should as reason mentioned above
    Hows that?

    first you have this:
    Code:
    #head p {
            float:left;
            margin-top:2%;
            font-style:oblique;
            font-size:150%;
            color:green;
        }
    which describe the generally look of p inside block with an "head" id.

    Then you have this:
    Code:
      #head p+p {
            float:right;
            font-size:75%;
            color:red;
       }
    which will "extend" the p-tag if it is preceded by another p-tag.

IMN logo majestic logo threadwatch logo seochat tools logo