Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to not apply styles to a particular element in CSS?

I have the next scenario

<blockquote>
    <p>text text text</p>
    <p>text text text</p>
    <p><cite>author cite</cite></p>
</blockquote>

I am trying to select just the p elements that are inside of blockquote but not contain child cite elements to add a " before and after every p element

my approach is

blockquote p:not(:has(> cite))::before,
blockquote p:not(:has(> cite))::after
{
  content: '"';
}

but it is not working as it still has no support yet, anyone can give me a hand? Thank you in advance

EDIT:
I want to point, It is not possible to modify the HTML by adding some class to p elements because the HTML is provided from a remote server.

like image 325
Raikish Avatar asked Nov 15 '25 17:11

Raikish


1 Answers

A hacky idea to hide the content with the cite element

blockquote p::before,
blockquote p::after {
  content: '"';
}

blockquote p cite {
  background: #fff; /* this need to match the main background */
  margin: 0 -6px; /* a trial and error value, you need to adjust it based on your font*/
  display: inline-block;
  position: relative;
}
<blockquote>
  <p>text text text</p>
  <p>text text text</p>
  <p><cite>author cite</cite></p>
</blockquote>
like image 138
Temani Afif Avatar answered Nov 18 '25 05:11

Temani Afif



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!