Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Using ~ and + selectors for conditional php loop

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #146566
    onebitrocket
    Participant

    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

    #146572
    Senff
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.