selectors.less 2.7 KB

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