Img.alignleft + .alignleft img

HTML & CSS
1

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

img.alignleft


<img class="align-left" ... >

.alignleft img


<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. :slight_smile:

3

The adjacent child selector (+) selects an element adjacent to itself. So in this case.


<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.

4

I don’t think that’s what Val meant by the +.

5

Hi Ralph - thank you!

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

very grateful - Val

6

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

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)

8

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:

h2 + p {margin-top: 0.5em}

Very handy. :slight_smile:

9

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 :slight_smile:

10

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/tutorials/wordpress-relative-links-post-shortcode-api/

11

Thanks, bookmarked. :slight_smile: