Use Checkboxes to Optionally Display Elements
It's the "Checkbox" hack! This is the key to how we can do things like making CSS toggles. Here, we look at using the :checked pseudo selector with the general sibling combinator to flip the turns of a Tic Tac Toe game.
Jhey Tompkins: [0:00] This is arguably the trickiest part of the tic-tac-toe game to implement. What we want to do is show and hide the labels for the Naughts and Crosses based on the turn.
[0:09] If we click Cross, then we should only show the Naught labels. If we click a Naught, we should only be showing the Cross labels.
[0:17] To do this, we can use a combination of the checked pseudo selector with the general sibling combinator. Here, we're saying when an input is checked, find the next sibling with the class name .board, and then within that, find a .board__cell and then a label of nth-of-type(odd), and then let's give a color of red.
[0:41] If we look at our demo and we click the label for Naught , now all of our Cross labels turn red. That's because when this input was checked, it looked for a general sibling with the class name .board and then a child with the class name .board__cell and then a label which was nth-of-type(odd), which in this case, is every label that is a Cross.
[1:03] At the same time, we want to style the other labels so that they don't appear. We can use the same selector, but instead of using label:nth-of-type(odd), we can use nth-of-type(even), and we can set these for now to color green. This is only going to work for the first turn. Therefore, we're going to have to write extra rules to cater for each turn.
[1:24] For turn two, we use the pseudo selector checked, then find the next general sibling that is checked, and then find the .board, and then the .board__cell. This time we want the label that is nth-of-type(even). Now we can see that all the labels are red when we have two checkboxes selected. Now we want to make all the Cross labels green.
[1:44] We can repeat the rule, but this time, it's going to be find a pseudo selector checked, a general sibling that is checked. Then for every .board__cell where the label is nth-of-type(odd), make that label green. Now we can see that the Cross labels are green, and the Naught labels are red.
[2:03] If we reset the board and go through those moves, if we hit Naught , now all the Naughts are green and the Crosses are red. If we hit Cross 1, all the Crosses go green and all the Naughts go red.
[2:16] To implement the logic for the rest of the turns, we keep chaining the check selector, and then flipping the type of the label within the .board__cell. Once we've typed out all the combinations, we end up with something like this. What we're going to do is we're going to show these labels and we're going to hide these ones.
[2:35] To make this easier to interpret, let's set a color on the labels. Let's say for every odd label, the color is red, and for every even label, the color is green. We can then match the state of our board to one of the rules we've created.
[2:52] If, for our example, we have three checked checkboxes, and the labels that are showing are of color red so we know that we are looking for a label that is nth-of-type(odd) that follows three elements who are in the checked state, this rule is the one that's currently active. Checked, checked, checked followed by an element whose class name is .board, the child .board__cell, and then the label nth-of-type(odd).
[3:20] In review, we can use CSS pseudo-selectors in combination with the general sibling combinator to render different states for our markup. In our example, we've explained the different turns of the tic-tac-toe game.