Day 50: :has(:not()) vs. :not(:has())

Something I was tripping over when I began learning about :has() was the combination with :not().

Let me show you what I got wrong by using an example. Let’s say we have two cards, each with a heading and some text. One of them also contains an image. 

<div class="card">
  <h2>Card with image</h2>
  <img src="https://assets.codepen.io/144736/skateboard.jpg" alt="" />
  <p>text</p>
</div>

<div class="card">
  <h2>Card without image</h2>
  <p>text</p>
</div>

Card with image

text

Card without image

text

Now we want to add additional styling to cards without an image. If a card doesn’t contain an image, we want to remove the margin on the heading and change the border-style.

.card:has(:not(img)) {
  border-style: dotted;
}

.card:has(:not(img)) h2 {
  margin-top: 0;
}

Card with image

text

Card without image

text

The styles apply to both cards, no matter whether an image is present. That’s because .card:has(:not(img)) means “select a .card that has any element that is not an image”. This means that the selector only wouldn’t apply if the card only contained images.

<div class="card">
  <img src="https://assets.codepen.io/144736/skateboard.jpg" alt="" />
</div>

If we switch :has() and :not() we’re instructing the browser to do something completely different. .card:not(:has(img)) means “select a .card doesn’t have (not has) an image”, and that’s exactly what we want in this case.

.card:not(:has(img)) {
  border-style: dotted;
}

.card:not(:has(img)) h2 {
  margin-top: 0;
}

Card with image

text

Card without image

text

My blog doesn’t support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

Something I was tripping over when I began learning about :has() was the combination with :not().

Let me show you what I got wrong by using an example. Let's say we have two cards, each with a heading and some text. One of them also contains an image. 

<div class="card">
  <h2>Card with image</h2>
  <img src="https://assets.codepen.io/144736/skateboard.jpg" alt="" />
  <p>text</p>
</div>

<div class="card">
  <h2>Card without image</h2>
  <p>text</p>
</div>

Card with image

text

Card without image

text

Now we want to add additional styling to cards without an image. If a card doesn't contain an image, we want to remove the margin on the heading and change the border-style.

.card:has(:not(img)) {
  border-style: dotted;
}

.card:has(:not(img)) h2 {
  margin-top: 0;
}

Card with image

text

Card without image

text

The styles apply to both cards, no matter whether an image is present. That's because .card:has(:not(img)) means “select a .card that has any element that is not an image”. This means that the selector only wouldn't apply if the card only contained images.

<div class="card">
  <img src="https://assets.codepen.io/144736/skateboard.jpg" alt="" />
</div>

If we switch :has() and :not() we're instructing the browser to do something completely different. .card:not(:has(img)) means “select a .card doesn't have (not has) an image”, and that's exactly what we want in this case.

.card:not(:has(img)) {
  border-style: dotted;
}

.card:not(:has(img)) h2 {
  margin-top: 0;
}

Card with image

text

Card without image

text

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2022-12-02T00:00:00+00:00) Day 50: :has(:not()) vs. :not(:has()). Retrieved from https://www.scien.cx/2022/12/02/day-50-hasnot-vs-nothas-2/

MLA
" » Day 50: :has(:not()) vs. :not(:has())." Manuel Matuzović | Sciencx - Friday December 2, 2022, https://www.scien.cx/2022/12/02/day-50-hasnot-vs-nothas-2/
HARVARD
Manuel Matuzović | Sciencx Friday December 2, 2022 » Day 50: :has(:not()) vs. :not(:has())., viewed ,<https://www.scien.cx/2022/12/02/day-50-hasnot-vs-nothas-2/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 50: :has(:not()) vs. :not(:has()). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/12/02/day-50-hasnot-vs-nothas-2/
CHICAGO
" » Day 50: :has(:not()) vs. :not(:has())." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/12/02/day-50-hasnot-vs-nothas-2/
IEEE
" » Day 50: :has(:not()) vs. :not(:has())." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/12/02/day-50-hasnot-vs-nothas-2/. [Accessed: ]
rf:citation
» Day 50: :has(:not()) vs. :not(:has()) | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/12/02/day-50-hasnot-vs-nothas-2/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts