Skip to content

Instantly share code, notes, and snippets.

@gmcusaro

gmcusaro/not-has.html

Created November 30, 2022 09:25
Show Gist options
  • Save gmcusaro/2a92f7d0086bc194d291b0cec264ca17 to your computer and use it in GitHub Desktop.
Save gmcusaro/2a92f7d0086bc194d291b0cec264ca17 to your computer and use it in GitHub Desktop.
Download ZIP
use :has() for when an element doesn't have some other element as a child
Raw
not-has.html
<html>
<head>
<title>:has not</title>
<style>
.card {
padding: 2rem;
border-radius: 10px;
border: 1px solid Highlight;
}
.card:not(:has(h3)) {
font-size: 1.5rem;
}
</style>
</head>
<body>
<div class="card">
<h3>A title</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam alias fugiat distinctio ad iure ut a sequi quod temporibus error architecto quia pariatur est modi assumenda sapiente totam, ducimus nulla!</p>
</div>
<div class="card">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam alias fugiat distinctio ad iure ut a sequi quod temporibus error architecto quia pariatur est modi assumenda sapiente totam, ducimus nulla!</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment