Moderne CSS Selektoren > :has & :not – ein cooler CSS Trick

Heute möchte ich euch mal eine kleine Einführung geben zu den modernen CSS Selektoren :has & :not. Damit kann man nämlich in CSS „programmieren“ und eine Art If / Then abfrage starten. In ein paar Jahren braucht ihr weder JS noch PHP und könnt ihr alles in CSS direkt machen 🙂

Und zwar bauen wir heute einen Hover Effekt der aber nicht das gehoverte Element anspricht sondern die anderen

Im heutigen Video zeige ich euch wie man sowas ausnutzen kann. So kann man nämlich gezielt den Blick eines Webseitenbesucher auf einzelne Elemente lenken und ungewünschte „verschwinden“ lassen..

Video

HTML

<div class="container">
      <div class="card">
        <h1>Hallo</h1>
      </div>
      <div class="card">
        <h1>Hallo</h1>
      </div>
      <div class="card">
        <h1>Hallo</h1>
      </div>
      <div class="card">
        <h1>Hallo</h1>
      </div>
    </div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #028cc3;
}
.container {
  display: grid;
  gap: 20px;

  justify-items: center;
  min-height: 70vh;
}
h1 {
  font-size: 2rem;
  color: #fff;
}
.card {
  width: 300px;
  height: 100px;
  background: #707070;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 300ms;
}

.card:hover {
  transform: scale(1.5);
}

.container:has(.card:hover) > .card:not(:hover) {
  transform: scale(0.6);
  filter: blur(10px);
}