DEV Community

Discussion on: CSS :has(.parent-selectors) 👪

View post

Replies for: Thanks for the form example! Still don't see how you would have done it with not when all the div elements are undistinguishable by their class na...

 
iainsimmons profile image
Iain Simmons •

Sorry, I didn't make that clear. The :not([class]) would be for targeting the paragraphs or headings that come from the CMS or whatever, where you don't have the ability to add or target classes.

e.g.

body {
  color: #000;
}

p:not([class]) {
  font-size: 1rem;
  color: #222;
}

.lead {
  font-size: 1.25rem;
}
Enter fullscreen mode Exit fullscreen mode 
<main>
  <p class="lead">Lorem ipsum...</p>
  <!-- other content not generated by the CMS -->

<div class="cms-sections">
    <div class="cms-section pos-0 cms-section-default">
        <div class="cms-block-container" style="/* some inline style */">
            <div class="cms-block-container-row row cms-row">
                <div class="col-12" data-cms-element-id="somecrypticidstring">
                    <div class="cms-element-text">
                        <h2>Headline</h2>
                        <p>CMS Content. Lorem ipsum...</p>
                    </div> 
                </div>
            </div>
        </div> 
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

The lead paragraph would be black, inheriting the color from the body.

So the not selector makes them act like global element styles that you opt out of by simply adding a class to the HTML element (even a blank string).

The assumption is that anything you want custom styling for that isn't regular body copy content (from a CMS or similar), you probably have control over the HTML and would normally be adding classes to style them anyways.

But anyways, this is obviously a whole other conversation! 🙂