CSS needs full dependency selectors.

There, I've said it. Not that I'm the first and certainly won't be the last.

CSS should let you choose what to do with something based on what's inside it but this isn't possible. We can only style an element based on what contains it and not the other way around.

To introduce a bit of consistency with the look of the blog I needed to reduce the bottom margin of <p> tags that contained the "read more" link but there is nothing to distinguish these from any other <p> tag except what they contained.

As CSS does not provide a means to do this I needed another solution.

Step up jQuery which uses the .has selector allowing use to target an element if it has a conditional item within it.

Here is a quick jQuery function that apples the styling for the "shrink-p" class to a <p> tag if it contains a link with the "more-link" class:

<script>
  jQuery(function ($) {
    $( "p" ).has( "a.more-link" ).addClass( "shrink-p" );
  } );
</script>
  1. matthew says: #
    @colinwalker what if you think of it the other way around, apply the margin/padding to the top and then the last p will always have no bottom one. If you want to remove top from first use p:first
    →†’

Mentions

  • Colin Walker
  • Colin Walker