CodePen Embed - CSS- pseudo klasy

Live
​x
 
<html>
  <head>
    <title>Pseudo klasy</title>
  </head>
  <style>
    section {
      margin: 20px 10px;
    }
​
    /*  W takim przypadku nadamy style CSS tylko na element <input> */
    input:checked {
      margin-right: 10px;
    }
​
    /*  Aby ostylować tekst, musimy skorzystać ze znaku tyldy (~). */
    input:checked ~ label {
      font-weight: 600;
      color: brown;
    }
​
    input:disabled ~ label {
      background: black;
      color: white;
    }
​
    div:empty {
      width: 30px;
      height: 30px;
      background: red;
    }
​
    /*  Kolor w chwili kliknięcia. */
    a:active {
      color: orange;
    }
​
    /*  Kolor po kliknięciu. */
    a:visited {
      color: green;
    }
​
    /*  Wygląd przycisku po najechaniu na niego kursorem myszy. */
    button:hover {
      box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.1);
      background-color: blueviolet;
      color: white;
      transform: scale(1.2);
    }
​
    /*  Wygląd przycisku w momencie kliknięcia. */
    button:active {
      box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.1);
      background-color: orange;
      color: white;
      transform: scale(1.2);
    }
​
    /*  Wygląd tagu <input /> po umieszczeniu w nim kursora */
    input:focus {
      box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
      background-color: lightpink;
    }
  </style>
  <body>
    <section>
      <h2>Płeć:</h2>
      <div>
        <input type="radio" id="man" name="sex" value="man" checked />
        <label for="man">Mężczyzna</label>
      </div>
      <div>
        <input type="radio" id="woman" name="sex" value="woman" />
        <label for="woman">Kobieta</label>
      </div>
    </section>
    <section>
      <h2>Zainteresowania:</h2>
      <div>
        <input type="checkbox" id="football" name="interest" value="football" />
        <label for="football">Piłka nożna</label>
      </div>
      <div>
        <input type="checkbox" id="movie" name="interest" value="movie" />
        <label for="movie">Filmy</label>
      </div>
      <div>
        <input type="checkbox" id="cook" name="interest" value="cook" />
        <label for="cook">Gotowanie</label>
      </div>
      <div>
        <input type="checkbox" id="run" name="interest" value="run" disabled />
        <label for="run">Bieganie (nieaktywne)</label>
      </div>
    </section>
    <section>
      <h2>Pusty tag</h2>
      <div></div>
    </section>
    <section>
      <h2>Link</h2>
      <a href="https://frontstack.pl" target="_blank">Link - click me</a>
    </section>
    <section>
      <h2>Przycisk z efektem <i>:hover</i></h2>
      <button>Hover me</button>
    </section>
    <section>
      <h2>Pole tekstowe</h2>
      <input />
    </section>
  </body>
</html>
​
This Pen is owned by frontstack on CodePen.
See more by @frontstack on CodePen
External CSS

This Pen doesn't use any external CSS resources.
External JavaScript

This Pen doesn't use any external JavaScript resources.