SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    img.alignleft + .alignleft img

    Hi - please can someone tell me the difference between

    img.alignleft + .alignleft img?

    Also, does it make any difference if we use 'red' or #ff0000?

    thanks, Val

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    img.alignleft

    Code:
    <img class="align-left" ... >
    .alignleft img

    Code:
    <p class="align-left">
      <img  ... >
    </p>
    The <p> is just an example. That class could be on any parent element or higher ancestor, such as <body>.

    does it make any difference if we use 'red' or #ff0000?
    No.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The adjacent child selector (+) selects an element adjacent to itself. So in this case.
    Code:
    <img class="align-left" src="dfkjd.jpg" alt="whatever" />
    <div class="align-left">aasdfasdf</div>
    Notice those elements are adjacent to each other .
    It doesn't work in IE6 though so use it with that in mind.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RyanReese View Post
    The adjacent child selector (+)
    I don't think that's what Val meant by the +.

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph - thank you!

    wow Ryan, you lost me completely with "adjacent child selector (+)"! I don't understand of those 3 words nor the + well I kinda understand "child" is a div within a div.

    very grateful - Val

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But I don't understand, what's the point of adding the img to:

    .alignleft img
    <p class="alignleft"><img ... ></p>

    why not just have:
    .alignleft { }

    I'm trying to do wordpress images and a big WP expert had both img.alignleft and .alignleft img in his css.

    thanks, Val

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you just do .ailgnleft then you (in your example) are only selecting the <p>

    However if you do .alignleft img then you are selecting the <img> INSIDE the <p> (that has the .alignleft class)
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by valarcher View Post
    you lost me completely with "adjacent child selector (+)"
    It's actually an "adjacent sibling selector". It is very handy. Say all <p>s have a top margin of 1em, but you want the <p>s following an <h2> to have a top margin of just 0.5em. Rather than putting a special class on each <p> that follows an <h2>, you could do this:

    Code:
    h2 + p {margin-top: 0.5em}
    Very handy.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by valarcher View Post
    But I don't understand, what's the point of adding the img to:

    .alignleft img
    <p class="alignleft"><img ... ></p>

    why not just have:
    .alignleft { }

    I'm trying to do wordpress images and a big WP expert had both img.alignleft and .alignleft img in his css.

    thanks, Val
    The reason that both may be useful is if you have say a 100 images inside a parent that you want all images aligned left then you can use one class on the parent only to achieve that effect. Otherwise you would need to add 100 classes (one to each image) instead

  10. #10
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh that's so cool, thanks Paul. Thanks to Ralph too for adjacent sibling selector.

    If you meet someone who needs relative links to img + href in wordpress (WP autom. makes all links absolute which is real drag if you're designing locally then upload to server) then here's the simple answer:

    http://designintheraw.com/2010/tutor...shortcode-api/

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by valarcher View Post
    If you meet someone who needs relative links to img + href in wordpress...
    Thanks, bookmarked.


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
  •