1. <body id="sample4">
  2. <div>
  3. <input type="checkbox" name="color" id="red"> <label for="red">←id="red"</label>
  4. <input type="checkbox" name="color" id="blue"> <label for="blue">←id="blue"</label>
  5. <ul>
  6. <li><label for="red">label for="red"</label></li>
  7. <li><label for="blue">label for="blue"</label></li>
  8. </ul>
  9. <p>このテキストの色が変わります。</p>
  10. </div>
  11. </body>
  1. /* :::::: sample4 :::::: */
  2. #sample4 div {
  3. position: relative;
  4. width: 360px;
  5. margin: 0 auto;
  6. padding: 10px 10px 0;
  7. text-align: center;
  8. }
  9. #sample4 input {
  10. vertical-align: text-bottom;
  11. }
  12. #sample4 ul {
  13. margin: 10px 0;
  14. padding: 0;
  15. overflow: hidden;
  16. list-style: none;
  17. color: white;
  18. }
  19. #sample4 ul li {
  20. width: 48%;
  21. border-radius: 5px;
  22. }
  23. #sample4 ul li label {
  24. display: block;
  25. padding: 3px;
  26. }
  27. #sample4 li:first-child {
  28. float: left;
  29. background: red;
  30. }
  31. #sample4 li:last-child {
  32. float: right;
  33. background: blue;
  34. }
  35. #sample4 p {
  36. margin: 0;
  37. color: #aaa;
  38. font-size: 2.4em;
  39. line-height: 1.4;
  40. }
  41. #sample4 #red:checked ~ p {
  42. color: red;
  43. }
  44. #sample4 #blue:checked ~ p {
  45. color: blue;
  46. }
  47. #sample4 #red:checked ~ #blue:checked ~ p {
  48. color: purple;
  49. }

このテキストの色が変わります。