Question posted in 
For whatever reason, it looks like Chrome and Firefox are ignoring this CSS rule. I don’t see them being applied in dev tools anywhere and am confused. I noticed that Safari is applying them, but Chrome and Firefox are not.
#et-boc .et-l .hentry,
#et-boc .et-l a,
#et-boc .et-l a:active,
#et-boc .et-l blockquote,
#et-boc .et-l div:not(.woocommerce-message, .star-rating),
#et-boc .et-l em,
#et-boc .et-l form,
#et-boc .et-l h1,
#et-boc .et-l h2,
#et-boc .et-l h3,
#et-boc .et-l h4,
#et-boc .et-l h5,
#et-boc .et-l h6,
#et-boc .et-l hr,
#et-boc .et-l iframe,
#et-boc .et-l img,
#et-boc .et-l input,
#et-boc .et-l label,
#et-boc .et-l li,
#et-boc .et-l object,
#et-boc .et-l ol,
#et-boc .et-l p,
#et-boc .et-l span,
#et-boc .et-l strong,
#et-boc .et-l textarea,
#et-boc .et-l ul,
#et-boc .et-l video {
text-align: inherit;
margin: 0;
padding: 0;
border: none;
outline: 0;
vertical-align: baseline;
background: 0 0;
letter-spacing: normal;
color: inherit;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
text-shadow: inherit;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none;
}<div id="et-boc">
<div class="et-l">
<p>Foobar</p>
</div>
</div>As you can see in the CSS there is the #et-boc .et-l p rule which should be hitting the paragraph tag but it’s not.
I noticed that if I type it out as a separate CSS rule instead of grouping it with all of the others that it works. Does Chrome / Firefox put some sort of limit on how many selectors you can add into a single rule?
This is output automatically from the WordPress plugin Divi Builder if you are wondering.
2
Answers
See MDN’s article on
:not:It looks like only Safari 9+ supports it (no other browsers do). Once non-Safari browsers see that rule, they choke up.
Change the line:
to two
:nots instead:so that they only contain a simple selector.
Seems you can’t do a list inside the
:not(). You’ll have to do two “not” lines.CSS