Use Selector Combinations to Optionally Display Elements
We can use selector combinations with the general sibling combinator to optionally show/hide elements using CSS. In this example, we look at detecting winning combinations for a Tic Tac Toe board.
Instructor: [0:00] Our Tic-Tac-Toe board now works, but we aren't detecting or displaying a result. Let's start by adding elements for the different results.
[0:07] Here, we're creating a div with the class game.Result. We're going to give it a second class of game.Result--X, and its content will be X wins. We can do the same for the noughts win and a draw.
[0:21] By default, we want to hide all game results, so we can set display none on game.Result. To show the correct result with CSS, we can use the general sibling combinator again in combination with the IDs of our inputs.
[0:35] For example, we know that if X0 was checked, X1 was checked, and X2 was checked, X would have aligned and therefore crosses would win. We could show the game result for X wins.
[0:47] To do this, we can use the ID selector in combination with the check pseudo-selector. We can use the general sibling selector.
[0:53] Once we have a winning combination, then we use the general sibling selector to select the correct game result. We need to do this for all possible combinations. Once we have all combinations, we set display block.
[1:07] If we check our demo, we can see that it's telling us that naught of 1. That's correct because O0 is checked, O4 is checked, and O8 is checked. It would also be true because O2 is checked, O4 is checked, and O6 is checked.
[1:22] If we reset the board, we can also check that this works for crosses by doing a combination that works. Here X1 is checked, X4 is checked, and X7 is checked.
[1:34] How do we detect a draw? To detect a draw, we know that we would have nine checkboxes all checked. Then we can select game.Result--draw and set that to display block. We can see in our demo that it's telling us that our current board results in a draw.
[1:50] However, what if we won on the final move? Then we would show two game results, a draw and a win, which isn't what we want. To fix this we can use another nested selector and use game.Result--draw under a winning combination and set display none. We can see that that has hidden the draw result.
[2:11] In review, we can use the Id selector combined with pseudo selectors and the general sibling combinator to detect active combinations in our markup. In this example, we're using it to show and hide the appropriate result for our Tic-Tac-Toe board.