<body>
  <main>
    <h2>:has()</h2>
    <div class="website">
      <a href="#">
        Coucou
      </a>
      <br>
      <a href="#">
        <span class="icon">></span> Envoyer
      </a>

      <a href="#">
        <img width="300" src="https://images.unsplash.com/photo-1720048169707-a32d6dfca0b3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
      </a>

      <div class="flx">
        <label for="Banane">Banane</label>
        <input id="Banane" type="checkbox" name="fruits">
        <label for="Pomme">Pomme</label>
        <input id="Pomme" type="checkbox" name="fruits">
      </div>
    </div>
  </main>
</body>
/*COULEURS*/
$noir:        rgba(0,0,0,1)!default;
$noirfonce:   rgba(29,31,32,1)!default;
$noiropaque:  rgba(29,31,32,.9)!default;
$rose:        rgba(152,38,114,1)!default;
$bleu:        rgba(128,155,189,1)!default;
$blanc:       rgba(255,255,255,1)!default;
$gris:        rgba(55,55,55,1)!default;
$gris2:       rgba(255,255,255,.8)!default;
$gris3:       rgba(204,204,204,1)!default;
$padding:     20px 10px!default;

/*TOUS LES ELEMENTS*/
*,*:after,*:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

main {
  padding: $padding;
  text-align: center;
}

.website {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

a:has(> .icon) {
  margin: 12px 0px;
  padding: 18px 32px;
  text-decoration: none;
  border-radius: 12px;

  background: $blanc;
  border: 1px solid $bleu;
  color: $bleu;

  .icon {
    margin-right: 8px;
  }

  &:hover,
  &:active {
    background: $noir;
    color: $blanc;
  }

  &:active .icon, 
  &:hover .icon { 
    margin-right: 0px;
  }
}

a:has(img) {
  display: block;
  width: 100%;
  text-align: center;
}

.flx {
  display: flex;
  justify-content: space-around;
  margin-top: 24px;
  width: 320px;
}

label:has(+ input) {
  position: relative;
  display: inline-block;
  margin-left: 24px;
  color: $rose;
  cursor: pointer;

  &::before {
    content: "";
    position: absolute;

    display: inline-block;
    left: -24px;
    width: 18px;
    height: 18px;
    border: 1px solid $rose;
  }
}

label:has(+ input:checked) {
  color: $noir;
  
  &::before {
    background: black;
    border: 1px solid $bleu;
  }
}

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

body {
  background-color: $noir;
  color: $bleu;
}

body:has(input:checked) {
  background-color: $bleu;
  color: $noir;
}

/*www.lintermediaire.be*/
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.