1. <body id="sample3">
  2. <h1><code>:not(s)</code><span>(否定疑似クラス)</span>を使ったサンプル</h1>
  3. <ul>
  4. <li class="notSmall">小さくないテキスト</li>
  5. <li class="notRed">赤くないテキスト</li>
  6. <li>何も指定してないテキスト</li>
  7. </ul>
  8. <blockquote>
  9. <p><abbr title="Cascading Style Sheets">CSS</abbr>は<abbr title="HyperText Markup Language">HTML</abbr>で表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。<span><a href="http://ja.wikipedia.org/wiki/Cascading_Style_Sheets" title="HyperText Markup Language - Wikipedia">Wikipediaより</a></span></p>
  10. </blockquote>
  11. <form>
  12. <p><input type="checkbox" id="checkbox"> <label for="checkbox">チェックボックス</label><br>
  13. <input type="radio" id="radio"> <label for="radio">ラジオボタン<span>は半透明にならない</span></label><br>
  14. <input type="text" id="text"> <label for="text">テキストボックス</label><br>
  15. <input type="reset" id="reset" value="リセットボタン"> <label for="reset">リセットボタン</label></p>
  16. </form>
  17. </body>
  1. /* :::::: sample3 :::::: */
  2. #sample3 {
  3. padding: 10px;
  4. }
  5. #sample3 ul,
  6. #sample3 p {
  7. margin-top: 0;
  8. margin-bottom: 10px;
  9. }
  10. #sample3 h1 span,
  11. #sample3 p span {
  12. font-size: 0.75em;
  13. }
  14. /* notSmallというクラスが付いてないli要素を小さく */
  15. #sample3 li:not([class="notSmall"]) {
  16. font-size: small;
  17. }
  18. /* notRedというクラスが付いてないli要素を赤く */
  19. #sample3 li:not(.notRed) {
  20. color: red;
  21. }
  22. /* titleが「Cascading Style Sheets」以外のabbr要素の背景をグレーに */
  23. #sample3 abbr:not([title="Cascading Style Sheets"]) {
  24. background: #eee url(../img/bg_amiten.gif);
  25. }
  26. /* ラジオボタンとそのラベル以外のinput要素とlabel要素を半透明に */
  27. #sample3 input:not([type="radio"]),
  28. #sample3 label:not([for="radio"]) {
  29. opacity: 0.2;
  30. }
  31. #sample3 h1::after,
  32. #sample3 p::after,
  33. #sample3 li::after,
  34. #sample3 label::after,
  35. #sample3 blockquote::before {
  36. padding: 0 3px;
  37. background: white;
  38. color: #999;
  39. font: 10px/1 "lucida grande",Arial,sans-serif;
  40. font-size: 10px;
  41. font-weight: normal;
  42. vertical-align: text-top;
  43. }
  44. #sample3 h1::after { content: "<h1>"; }
  45. #sample3 p::after { content: "<p>"; }
  46. #sample3 li::after { content: "<li>"; }
  47. #sample3 label::after { content: "<label>"; }
  48. #sample3 blockquote::before { content: "<blockquote>"; }

:not(s)(否定疑似クラス)を使ったサンプル

  • 小さくないテキスト
  • 赤くないテキスト
  • 何も指定してないテキスト

CSSHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。Wikipediaより