selectors.css 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. h1 a:hover,
  2. h2 a:hover,
  3. h3 a:hover,
  4. h1 p:hover,
  5. h2 p:hover,
  6. h3 p:hover {
  7. color: red;
  8. }
  9. #all {
  10. color: blue;
  11. }
  12. #the {
  13. color: blue;
  14. }
  15. #same {
  16. color: blue;
  17. }
  18. ul,
  19. li,
  20. div,
  21. q,
  22. blockquote,
  23. textarea {
  24. margin: 0;
  25. }
  26. td {
  27. margin: 0;
  28. padding: 0;
  29. }
  30. td,
  31. input {
  32. line-height: 1em;
  33. }
  34. a {
  35. color: red;
  36. }
  37. a:hover {
  38. color: blue;
  39. }
  40. div a {
  41. color: green;
  42. }
  43. p a span {
  44. color: yellow;
  45. }
  46. .foo .bar .qux,
  47. .foo .baz .qux {
  48. display: block;
  49. }
  50. .qux .foo .bar,
  51. .qux .foo .baz {
  52. display: inline;
  53. }
  54. .qux.foo .bar,
  55. .qux.foo .baz {
  56. display: inline-block;
  57. }
  58. .qux .foo .bar .biz,
  59. .qux .foo .baz .biz {
  60. display: none;
  61. }
  62. .a.b.c {
  63. color: red;
  64. }
  65. .c .b.a {
  66. color: red;
  67. }
  68. .foo .p.bar {
  69. color: red;
  70. }
  71. .foo.p.bar {
  72. color: red;
  73. }
  74. .foo + .foo {
  75. background: amber;
  76. }
  77. .foo + .foo {
  78. background: amber;
  79. }
  80. .foo + .foo,
  81. .foo + .bar,
  82. .bar + .foo,
  83. .bar + .bar {
  84. background: amber;
  85. }
  86. .foo a > .foo a,
  87. .foo a > .bar a,
  88. .foo a > .foo b,
  89. .foo a > .bar b,
  90. .bar a > .foo a,
  91. .bar a > .bar a,
  92. .bar a > .foo b,
  93. .bar a > .bar b,
  94. .foo b > .foo a,
  95. .foo b > .bar a,
  96. .foo b > .foo b,
  97. .foo b > .bar b,
  98. .bar b > .foo a,
  99. .bar b > .bar a,
  100. .bar b > .foo b,
  101. .bar b > .bar b {
  102. background: amber;
  103. }
  104. .other ::fnord {
  105. color: red;
  106. }
  107. .other::fnord {
  108. color: red;
  109. }
  110. .other ::bnord {
  111. color: red;
  112. }
  113. .other::bnord {
  114. color: red;
  115. }
  116. .blood {
  117. color: red;
  118. }
  119. .bloodred {
  120. color: green;
  121. }
  122. #blood.blood.red.black:blood {
  123. color: black;
  124. }
  125. :nth-child(3) {
  126. selector: interpolated;
  127. }
  128. .test:nth-child(3) {
  129. selector: interpolated;
  130. }
  131. .test:nth-child(odd):not(:nth-child(3)) {
  132. color: #ff0000;
  133. }
  134. [prop],
  135. [prop=10%],
  136. [prop="value3"],
  137. [prop*="val3"],
  138. [|prop~="val3"],
  139. [*|prop$="val3"],
  140. [ns|prop^="val3"],
  141. [3^="val3"],
  142. [3=3],
  143. [3] {
  144. attributes: yes;
  145. }
  146. /*
  147. Large comment means chunk will be emitted after } which means chunk will begin with whitespace...
  148. blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank
  149. blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank
  150. blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank
  151. blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank
  152. blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank
  153. */
  154. .blood {
  155. color: red;
  156. }
  157. .foo:not(.tst.only-nested .level2:hover) {
  158. test: only-nested;
  159. }
  160. .foo.nestend-and-non-nested:not(.tst.nestend-and-non-nested:hover) {
  161. test: nestend-and-non-nested;
  162. }
  163. .selector:not(:hover) {
  164. test: global scope;
  165. }
  166. .extend-this,
  167. .active.first-level .second-level,
  168. .first-level .second-level.active2 {
  169. content: '\2661';
  170. }