Using ~ and + selectors for conditional php loop

[onebitrocket]

I’m trying to write a listing class that applies to a php loop. It’s is for news articles, event listings, PDF resources etc.

The markup for each item usually contains a image thumbnail, a heading the some p tags with a closing hr, but there are occasions where there might not be an image for an listing item.

What I’d like to achieve if possible, is to use css selectors to apply padding-left to all elements between the image thumbnail and the hr, but if there is no image, don’t apply the padding.

My code is something like this:

<div class="listing">
     <img src="#" />
<h#>heading text</h#>
<p>some text<p>
<hr />
<h#>heading text</h#>
<p>some text<p>
<hr />
<h#>heading text</h#>
<p>some text<p>
<hr />
<img src="#" />
<h#>heading text</h#>
<p>some text<p>
<hr />
<h#>heading text</h#>
<p>some text<p>
<hr />
</div>

And a css classes like:
.listing > img {float:left;max-width:50px}
.listing > img ~ * {padding-left:60px}

Thanks

[Senff]

If you are looking for something like this setup, why not just add some right-margin to the image?

http://codepen.io/senff/pen/FEpxG

But, if you must target the elements next to the IMG, you can’t use the ~ sign because that will target ALL elements that come after any IMG (which, basically, is everything in the document). You’d have to wrap every block in a separate DIV to achieve that:

http://codepen.io/senff/pen/vJhsD

[Author]

Posts