Exclude Element with Specific Child

Question

On posts on my (Tumblr) website, I have various paragraphs, some of which sit inside a blockquote. Where a blockquote appears, the paragraph right above it, which is usually the first paragraph (though multiple blockquotes would mean multiple of these) generally has a single link child and nothing else inside. For instance:

<p> <a class="foo"> Link name </a> </p>
<blockquote>
    <p> If there were multiple nested blockquotes, each one would have a <p><a class="foo"> line atop each new blockquote. </p>
    <p> Some more text </p>
</blockquote>
<p> Some more text. </p>
<p> Even more text. </p>

How can I style all paragraphs (add a bottom padding), EXCEPT those with the single link child (which I want to sit flush with the blockquote--no/minimal padding or margins)? Presumably ":not()" will work, but I have yet to figure out the proper selector to use inside the parentheses.

This is an issue of a parent selector. Which there isn't one. You will need to use JS if you want to target any paragraph that has a single link inside of it. — disinfor, Jun 03 '20 at 13:50

score 0 · Answer 1 · answered Jun 03 '20 at 13:47

0

To style all <p> elements that are descendants of <blockquote> elements (not just direct descendants), you can use a CSS selector like this.

blockquote p {
  color: red;
}

<p>Selector doesn't apply to me.</p>
<blockquote>
  <p>Selector applies to me.</p>
  <p>And me.</p>
  <footer>
    <p>And also me.</p>
  </footer>
</blockquote>

answered Jun 03 '20 at 13:47

Sean

4,914
2
17
37

I just edited my post to reflect this (my mistake for not saying so at first), but not all paragraphs will be filed under blockquote. I'll want to style (add bottom padding to) paragraphs besides those in blockquote, but I mainly want the p > a paragraph to sit flush with the blockquote. – Nintendraw Jun 03 '20 at 13:59

yinsweet · Accepted Answer · 2020-06-03T14:18:17.390

0

Use the :has() and :not() CSS pseudo-class selectors in jquery can achieve what you desire. :has() selector cannot be used within CSS stylesheets.

$(document).ready(function() {
  var pElements = $(':not(p:has(> a))');
  pElements.css('padding-bottom', '20px');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p> <a class="foo"> Link name </a> </p>
<blockquote>
  <p> Some text </p>
  <p> Some more text </p>
</blockquote>
<p> Some more text. </p>
<p> Even more text. </p>

Update: Include the <article class='post'>

$(document).ready(function() {
  var pElements = $('article.post :not(p:has(> a))');
  pElements.css('padding-bottom', '20px');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<article class="post">
  <p> <a class="foo"> Link name </a> </p>
  <blockquote>
    <p> Some text </p>
    <p> Some more text </p>
  </blockquote>
  <p> Some more text. </p>
  <p> Even more text. </p>
</article>

<p> P element out of class post </p>
<p> P element out of class post </p>
<p> P element out of class post </p>
<p> P element out of class post </p>
<p> P element out of class post </p>

edited Jun 03 '20 at 14:18

answered Jun 03 '20 at 13:57

yinsweet

2,696
1
7
18

(Was hoping to avoid jQuery, but) This worked for my specific issue; thanks! Seems I busted every other "paragraph"(?) element on the rest of my website (most particularly in the sidebar; various elements on it are too spread-out now). I think this is a matter of changing what's targeted by your function (e.g. the $(document).ready bit). – Nintendraw Jun 03 '20 at 14:08
':not(p:has(> a))' selectors will change all the `
` that has no link inside.
– yinsweet Jun 03 '20 at 14:12
Never mind. I figured out how to narrow the function's target (dunno if your post edit appeared before this comment or not). Thanks again! – Nintendraw Jun 03 '20 at 14:16
Glad to help. I have updated the use case of `
` element inside a specific element class.
– yinsweet Jun 03 '20 at 14:20

Exclude Element with Specific Child

2 Answers2