CSS riddle

CSS-riddle.markdown

CSS riddle

I tried to find a way to explain more complicated CSS rulesets with a CSS riddle.

A Pen by Mario Winkler on CodePen.

License.

index.html

<div id="chessboard">
  <a href="#next" class="go-forward">Solved!</a>
</div>

script.js

var cb_count = 64,
    board = $("#chessboard");


for(i = 1; i<= cb_count; i++){
  var field = $('<input />', { 
        type: 'checkbox', 
        id: 'cb'+i, 
        value: 'field' }),
      label = $('<label>', { 
        for: 'cb'+i});
  field.appendTo(board);
  label.appendTo(board);
}

$("input").prop("indeterminate", true);

style.scss

input{
  display:none;
 
  + label{
    display: block;
    border: 1px solid #ccc;
    width: 50px;
    height: 50px;
    float: left;
    margin: 2px;
    font-size: 30px;
    padding:8px 0;
    box-sizing:border-box;
    
    &::before{
      font-family: Arial;
      text-align: center;
      width: inherit;
      display: inherit;
    }
    
    &:hover {
      opacity: 0.6;
    }
  }
  
  &:not(:checked) + label{
      background-color: #dd8888;
    &::before{
      content: "✖";
      color:white;
    }
  }
  
  &:indeterminate + label{
    background-color: white;
    &::before{
      content: "?";
      color: rgba(0,0,0,0.2);
    }
  }
  
  &:checked + label{
      background-color: #88dd88;
    &::before{
      content: "✓";
      color:white;
    }
  }
}
 
// highlight checked / unchecked
input:checked ~ input:not(:checked) ~ input:checked + label,
input:not(:checked) ~ input:checked + label
{
  background-color: blue!important;
}
 
// prevent puzzle from being solved if not all indeterminate items are solved
.go-forward {
   display: block;
}
 
input:indeterminate ~ .go-forward {
  display: none;
}