Warning, /frameworks/syntax-highlighting/autotests/folding/highlight.css.fold is written in an unsupported language. File is not indexed.
0001 <beginfold id='1'>/*</beginfold id='1'>*
0002 * This is a pseudo CSS file to test Kate's CSS syntax highlighting.
0003 <endfold id='1'>*/</endfold id='1'>
0004
0005 @import url("othersheet.css") screen, tv;
0006
0007 body <beginfold id='2'>{</beginfold id='2'>
0008 font-size: 15pt;
0009 font-family: Verdana, Helvetica, "Bitstream Vera Sans", sans-serif;
0010 margin-top: 0px; <beginfold id='1'>/*</beginfold id='1'> yet another comment <endfold id='1'>*/</endfold id='1'>
0011 margin-bottom: 0px;
0012 // this is no comment, it's just broken!
0013 margin-left: 0px;
0014 margin-right: 0px;
0015 background-color: hsl(0, 0%, calc(95% - 3%));
0016 <endfold id='2'>}</endfold id='2'>
0017
0018 .something
0019 <beginfold id='2'>{</beginfold id='2'>
0020 margin-right: 0px;
0021 color: #cdd;
0022 color: #AAFE04;
0023 color: rgb(10%,30%,43%);
0024 background: maroon;
0025 <endfold id='2'>}</endfold id='2'>
0026
0027 a:hover <beginfold id='2'>{</beginfold id='2'>
0028 <endfold id='2'>}</endfold id='2'>
0029
0030 #header,
0031 p.intro:first-letter,
0032 p:lang(nl),
0033 img[align="right"]
0034 <beginfold id='2'>{</beginfold id='2'>
0035 border: 1px solid Qt::red !important;
0036 -moz-border-radius: 15px; <beginfold id='1'>/*</beginfold id='1'> unknown properties render italic <endfold id='1'>*/</endfold id='1'>
0037 <endfold id='2'>}</endfold id='2'>
0038
0039 @media print <beginfold id='2'>{</beginfold id='2'>
0040
0041 #header
0042 <beginfold id='2'>{</beginfold id='2'>
0043 display: none;
0044 <endfold id='2'>}</endfold id='2'>
0045
0046 <endfold id='2'>}</endfold id='2'>
0047
0048 <beginfold id='1'>/*</beginfold id='1'>
0049 TODO: add more tests, e.g. media
0050 <endfold id='1'>*/</endfold id='1'>
0051
0052
0053 .nice-look <beginfold id='2'>{</beginfold id='2'>
0054 font-variant-alternates: styleset(nice-style);
0055 <endfold id='2'>}</endfold id='2'>
0056
0057 ul <beginfold id='2'>{</beginfold id='2'>
0058 list-style: thumbs;
0059 <endfold id='2'>}</endfold id='2'>
0060
0061 <beginfold id='1'>/*</beginfold id='1'> SVG <a> <endfold id='1'>*/</endfold id='1'>
0062 svg|a <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0063
0064 <beginfold id='1'>/*</beginfold id='1'> XHTML and SVG <a> <endfold id='1'>*/</endfold id='1'>
0065 *|a <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0066
0067 *<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0068 .class<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0069 #id<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0070 :hover<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0071 :lang(fr)<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0072 E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0073 E F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0074 E>F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0075 E > F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0076 E~F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0077 E ~ F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0078 E:first-child<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0079 E:visited<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0080 E::after<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0081 E:lang(c)<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0082 E:lang(fr-ca)<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0083 E + F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0084 E+F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0085 E[foo]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0086 E[foo=warning]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0087 E[foo="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0088 E[foo~="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0089 E[foo^="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0090 E[foo$="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0091 E[foo*="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0092 E[lang|="en"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0093 DIV.warning<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0094 DIV .warning<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0095 E#myid<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0096 E #myid<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0097 E,E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0098 E, E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0099 E ,E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0100 E , E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0101
0102 p:nth-child(2) <beginfold id='2'>{</beginfold id='2'>
0103 background: red;
0104 <endfold id='2'>}</endfold id='2'>
0105
0106 <beginfold id='1'>/*</beginfold id='1'> Elements that are not <div> or <span> elements <endfold id='1'>*/</endfold id='1'>
0107 body :not(div):not(span) <beginfold id='2'>{</beginfold id='2'>
0108 font-weight: bold;
0109 <endfold id='2'>}</endfold id='2'>
0110
0111 <beginfold id='1'>/*</beginfold id='1'> Elements that are not `.crazy` or `.fancy` <endfold id='1'>*/</endfold id='1'>
0112 <beginfold id='1'>/*</beginfold id='1'> Note that this syntax is not well supported yet. <endfold id='1'>*/</endfold id='1'>
0113 body :not(.crazy, .fancy) <beginfold id='2'>{</beginfold id='2'>
0114 font-family: sans-serif;
0115 <endfold id='2'>}</endfold id='2'>
0116
0117 :nth-child(odd) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0118 :nth-child(even) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0119 :nth-child(4) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0120 :nth-child(4n) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0121 :nth-child(3n+4) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0122 :nth-child(-n+3) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0123 :nth-child(n+8):nth-child(-n+15) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0124
0125 .first span:nth-child(2n+1),
0126 .second span:nth-child(2n+1),
0127 .third span:nth-of-type(2n+1) <beginfold id='2'>{</beginfold id='2'>
0128 background-color: lime;
0129 unknown-property: lime;
0130 <endfold id='2'>}</endfold id='2'>
0131
0132 :root<beginfold id='2'>{</beginfold id='2'>
0133 --foo: if(x > 5) this.width = 10; <beginfold id='1'>/*</beginfold id='1'> valid custom property, invalid in any normal property <endfold id='1'>*/</endfold id='1'>
0134 <endfold id='2'>}</endfold id='2'>
0135
0136 :root,
0137 :root:lang(en) <beginfold id='2'>{</beginfold id='2'>--external-link: "external link";<endfold id='2'>}</endfold id='2'>
0138 :root:lang(de) <beginfold id='2'>{</beginfold id='2'>--external-link: "externer Link";<endfold id='2'>}</endfold id='2'>
0139
0140 a[href^="http"]::after <beginfold id='2'>{</beginfold id='2'>content: " (" var(--external-link) ")"<endfold id='2'>}</endfold id='2'>
0141
0142 one <beginfold id='2'>{</beginfold id='2'> --foo: 10px; <endfold id='2'>}</endfold id='2'>
0143 two <beginfold id='2'>{</beginfold id='2'> --bar: calc(var(--foo) + 10px); <endfold id='2'>}</endfold id='2'>
0144 three <beginfold id='2'>{</beginfold id='2'> --foo: calc(var(--bar) + 10px); <endfold id='2'>}</endfold id='2'>
0145 .foo <beginfold id='2'>{</beginfold id='2'>
0146 --gap: 20;
0147 margin-top: var(--gap)px; <beginfold id='1'>/*</beginfold id='1'>20 px<endfold id='1'>*/</endfold id='1'>
0148 margin-top: calc(var(--gap) * 1px); <beginfold id='1'>/*</beginfold id='1'>20px<endfold id='1'>*/</endfold id='1'>
0149 <endfold id='2'>}</endfold id='2'>
0150
0151 foo <beginfold id='2'>{</beginfold id='2'>
0152 width: calc(50% -8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
0153 width: calc(50%- 8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
0154 width: calc(50% +8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
0155 width: calc(50%+ 8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
0156 width: calc(2px -var(--a)); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
0157 width: calc(50%*-8px);
0158 width: calc(50% - 8px);
0159 width: calc(50% + -8px);
0160 width: calc(50% +(8px));
0161 width: calc(2px -(var(--a)));
0162 <endfold id='2'>}</endfold id='2'>
0163
0164 sweet-alert input:focus::-moz-placeholder <beginfold id='2'>{</beginfold id='2'>
0165 -webkit-transition: opacity 0.3s 0.03s ease;
0166 transition: opacity 0.3s 0.03s ease;
0167 opacity: 0.5;
0168 <endfold id='2'>}</endfold id='2'>
0169
0170
0171 @font-feature-values Font One <beginfold id='2'>{</beginfold id='2'>
0172 @styleset <beginfold id='2'>{</beginfold id='2'>
0173 nice-style: 12;
0174 <endfold id='2'>}</endfold id='2'>
0175 <endfold id='2'>}</endfold id='2'>
0176
0177 @font-feature-values Font Two <beginfold id='2'>{</beginfold id='2'>
0178 @styleset <beginfold id='2'>{</beginfold id='2'>
0179 nice-style: 4;
0180 <endfold id='2'>}</endfold id='2'>
0181 <endfold id='2'>}</endfold id='2'>
0182
0183 @counter-style thumbs <beginfold id='2'>{</beginfold id='2'>
0184 system: cyclic;
0185 symbols: "\1F44D";
0186 suffix: " ";
0187 <endfold id='2'>}</endfold id='2'>
0188
0189 @font-face <beginfold id='2'>{</beginfold id='2'>
0190 font-family: "Open Sans";
0191 src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
0192 url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
0193 <endfold id='2'>}</endfold id='2'>
0194
0195 @page <beginfold id='2'>{</beginfold id='2'>
0196 margin: 1cm;
0197 <endfold id='2'>}</endfold id='2'>
0198
0199 @page :first <beginfold id='2'>{</beginfold id='2'>
0200 margin: 2cm;
0201 <beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
0202 marks: crop cross;
0203 <endfold id='2'>}</endfold id='2'>
0204
0205 @page :unknown <beginfold id='2'>{</beginfold id='2'>
0206 margin: 2cm;
0207 <endfold id='2'>}</endfold id='2'>
0208
0209 @font-face <beginfold id='2'>{</beginfold id='2'>
0210 unknown: 2px;
0211 <beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
0212 font-family: "Bitstream Vera Serif Bold";
0213 src: url("/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff");
0214 <endfold id='2'>}</endfold id='2'>
0215
0216 @viewport <beginfold id='2'>{</beginfold id='2'>
0217 zoom: 0.75;
0218 <beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
0219 min-zoom: 0.5;
0220 max-zoom: 0.9;
0221 <endfold id='2'>}</endfold id='2'>
0222
0223 @viewport <beginfold id='2'>{</beginfold id='2'>
0224 orientation: landscape;
0225 <beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
0226 orientation: landscape;
0227 <endfold id='2'>}</endfold id='2'>
0228
0229 @document url("https://www.example.com/") <beginfold id='2'>{</beginfold id='2'>
0230 h1 <beginfold id='2'>{</beginfold id='2'>
0231 color: green;
0232 <endfold id='2'>}</endfold id='2'>
0233 <endfold id='2'>}</endfold id='2'>
0234
0235 @supports (display: grid) <beginfold id='2'>{</beginfold id='2'>
0236 div <beginfold id='2'>{</beginfold id='2'>
0237 display: grid;
0238 <endfold id='2'>}</endfold id='2'>
0239 <endfold id='2'>}</endfold id='2'>
0240
0241 @media (max-width: 600px) <beginfold id='2'>{</beginfold id='2'>
0242 .sidebar <beginfold id='2'>{</beginfold id='2'>
0243 display: none;
0244 <endfold id='2'>}</endfold id='2'>
0245 <endfold id='2'>}</endfold id='2'>
0246
0247 @import url("fineprint.css") print;
0248 @import url(fineprint.css) print;
0249 @import url('bluish.css') speech;
0250 @import 'custom.css';
0251 @import url("chrome://communicator/skin/");
0252 @import "common.css" screen;
0253 @import url('landscape.css') screen and (orientation:landscape);
0254
0255 @namespace url(http://www.w3.org/1999/xhtml);
0256 @namespace svg url(http://www.w3.org/2000/svg);
0257
0258 @keyframes important1 <beginfold id='2'>{</beginfold id='2'>
0259 from <beginfold id='2'>{</beginfold id='2'> margin-top: 50px; <endfold id='2'>}</endfold id='2'>
0260 50% <beginfold id='2'>{</beginfold id='2'> margin-top: 150px !important; <endfold id='2'>}</endfold id='2'> <beginfold id='1'>/*</beginfold id='1'> ignored <endfold id='1'>*/</endfold id='1'>
0261 to <beginfold id='2'>{</beginfold id='2'> margin-top: 100px; <endfold id='2'>}</endfold id='2'>
0262 <endfold id='2'>}</endfold id='2'>
0263
0264 @keyframes important2 <beginfold id='2'>{</beginfold id='2'>
0265 from <beginfold id='2'>{</beginfold id='2'> margin-top: 50px;
0266 margin-bottom: 100px; <endfold id='2'>}</endfold id='2'>
0267 to <beginfold id='2'>{</beginfold id='2'> margin-top: 150px !important; <beginfold id='1'>/*</beginfold id='1'> ignored <endfold id='1'>*/</endfold id='1'>
0268 margin-bottom: 50px; <endfold id='2'>}</endfold id='2'>
0269 <endfold id='2'>}</endfold id='2'>
0270
0271 @keyframes slidein <beginfold id='2'>{</beginfold id='2'>
0272 from <beginfold id='2'>{</beginfold id='2'>
0273 margin-left: 100%;
0274 width: 300%;
0275 <endfold id='2'>}</endfold id='2'>
0276
0277 to <beginfold id='2'>{</beginfold id='2'>
0278 margin-left: 0%;
0279 width: 100%;
0280 <endfold id='2'>}</endfold id='2'>
0281 <endfold id='2'>}</endfold id='2'>
0282
0283 @media print <beginfold id='2'>{</beginfold id='2'>
0284 a:hover <beginfold id='2'>{</beginfold id='2'> color: red <endfold id='2'>}</endfold id='2'>
0285 <beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
0286 a:hover <beginfold id='2'>{</beginfold id='2'> color: red <endfold id='2'>}</endfold id='2'>
0287 <endfold id='2'>}</endfold id='2'>
0288
0289 <beginfold id='1'>/*</beginfold id='1'>
0290 * CSS Syntax Highlight Sample File (Standard)
0291 *
0292 * This file contains most CSS syntax, CSS3 properties, @media, @font-face and
0293 * @keyframes annotations.
0294 *
0295 * @author Guo Yunhe guoyunhebrave@gmail.com
0296 * @date 2016-09-16
0297 <endfold id='1'>*/</endfold id='1'>
0298
0299 <beginfold id='1'>/*</beginfold id='1'>
0300 * Block comment
0301 *
0302 * Alert keywords:
0303 * TODO BUG FIXME
0304 <endfold id='1'>*/</endfold id='1'>
0305
0306 @charset "UTF-8";
0307
0308 @import url("components/button.css");
0309
0310
0311 <beginfold id='1'>/*</beginfold id='1'> Properties <endfold id='1'>*/</endfold id='1'>
0312
0313 html, body <beginfold id='2'>{</beginfold id='2'>
0314 font-family: "Droid Sans", Arial, sans-serif;
0315 font-size: 11pt;
0316 line-height: 1.5em;
0317 max-width: calc(100% - 300px);
0318 background: #fff000;
0319 text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
0320 box-sizing: border-box;
0321 <endfold id='2'>}</endfold id='2'>
0322
0323
0324 <beginfold id='1'>/*</beginfold id='1'> Selectors <endfold id='1'>*/</endfold id='1'>
0325
0326 blockquote <beginfold id='2'>{</beginfold id='2'>
0327 margin: 0;
0328 <endfold id='2'>}</endfold id='2'>
0329
0330 header #logo <beginfold id='2'>{</beginfold id='2'>
0331 width: 100px;
0332 <endfold id='2'>}</endfold id='2'>
0333
0334 div#footer .link <beginfold id='2'>{</beginfold id='2'>
0335 color: blue;
0336 <endfold id='2'>}</endfold id='2'>
0337
0338 sidebar #subscribe .subscribe_form input[type="text"] <beginfold id='2'>{</beginfold id='2'>
0339 font-size: 20px;
0340 <endfold id='2'>}</endfold id='2'>
0341
0342 sidebar #subscribe .subscribe_form:nth-child(2n + 1):hover input[class*="small-"] <beginfold id='2'>{</beginfold id='2'>
0343 font-weight: bold;
0344 <endfold id='2'>}</endfold id='2'>
0345
0346
0347 <beginfold id='1'>/*</beginfold id='1'> Media Queries <endfold id='1'>*/</endfold id='1'>
0348
0349 @media print <beginfold id='2'>{</beginfold id='2'>
0350 .container <beginfold id='2'>{</beginfold id='2'>
0351 width: 100%;
0352 <endfold id='2'>}</endfold id='2'>
0353 <endfold id='2'>}</endfold id='2'>
0354
0355 @media screen and (min-width: 768px) <beginfold id='2'>{</beginfold id='2'>
0356 .container <beginfold id='2'>{</beginfold id='2'>
0357 width: 600px;
0358 <endfold id='2'>}</endfold id='2'>
0359 <endfold id='2'>}</endfold id='2'>
0360
0361 @media screen and (min-width: 768px) and (max-width: 960px) <beginfold id='2'>{</beginfold id='2'>
0362 .container <beginfold id='2'>{</beginfold id='2'>
0363 width: 720px;
0364 <endfold id='2'>}</endfold id='2'>
0365 <endfold id='2'>}</endfold id='2'>
0366
0367
0368 <beginfold id='1'>/*</beginfold id='1'> Fontface <endfold id='1'>*/</endfold id='1'>
0369
0370 @font-face <beginfold id='2'>{</beginfold id='2'>
0371 font-family: MyHelvetica;
0372 src: local("Helvetica Neue Bold"),
0373 local("HelveticaNeue-Bold"),
0374 url(MgOpenModernaBold.ttf);
0375 font-weight: bold;
0376 <endfold id='2'>}</endfold id='2'>
0377
0378 <beginfold id='1'>/*</beginfold id='1'> Animation (Keyframes) <endfold id='1'>*/</endfold id='1'>
0379
0380 @keyframes slidein <beginfold id='2'>{</beginfold id='2'>
0381 from <beginfold id='2'>{</beginfold id='2'>
0382 margin-left: 100%;
0383 width: 300%;
0384 <endfold id='2'>}</endfold id='2'>
0385
0386 to <beginfold id='2'>{</beginfold id='2'>
0387 margin-left: 0%;
0388 width: 100%;
0389 <endfold id='2'>}</endfold id='2'>
0390 <endfold id='2'>}</endfold id='2'>
0391
0392
0393 <beginfold id='1'>/*</beginfold id='1'> Region markers <endfold id='1'>*/</endfold id='1'>
0394
0395 <beginfold id='3'>/*BEGIN Comment */</beginfold id='3'>
0396
0397
0398
0399 <endfold id='3'>/*END Comment */</endfold id='3'>
0400
0401 <beginfold id='1'>/*</beginfold id='1'>
0402 * CSS Syntax Highlight Sample File (Complex)
0403 *
0404 * This file contains complex CSS syntax that can test unexpected situations.
0405 *
0406 * @author Guo Yunhe guoyunhebrave@gmail.com
0407 * @date 2016-09-16
0408 <endfold id='1'>*/</endfold id='1'>
0409
0410
0411 <beginfold id='1'>/*</beginfold id='1'> Comments with special content <endfold id='1'>*/</endfold id='1'>
0412
0413 <beginfold id='1'>/*</beginfold id='1'>
0414 * .class-selector #id "string" 'comment' // comment {} [] () /* comment
0415 * TODO BUG DEBUG
0416 * body {
0417 * margin: 0 !important;
0418 * }
0419 <endfold id='1'>*/</endfold id='1'>
0420
0421 <beginfold id='1'>/*</beginfold id='1'> Comments in special positions <endfold id='1'>*/</endfold id='1'>
0422
0423 header<beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>.active <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'> <beginfold id='2'>{</beginfold id='2'>
0424 <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'> color : <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'> blue<beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>;
0425 font-family: Arial <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>,
0426 "Droid Sans", <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>
0427 sans-serif<beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>;
0428 <endfold id='2'>}</endfold id='2'>
0429
0430 @media screen <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'> and (max-width: 300px <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>) <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'> <beginfold id='2'>{</beginfold id='2'><beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'><endfold id='2'>}</endfold id='2'>
0431
0432
0433 <beginfold id='1'>/*</beginfold id='1'> Strings with special content <endfold id='1'>*/</endfold id='1'>
0434
0435 @import url("{} $variable /* comment */");
0436
0437
0438 <beginfold id='1'>/*</beginfold id='1'> Without extra breaklines and spaces <endfold id='1'>*/</endfold id='1'>
0439
0440 pre.primary:hover.large:nth-child(2n-1)<beginfold id='2'>{</beginfold id='2'>font-size:17px;font-family:"Noto Sans";-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.3)<endfold id='2'>}</endfold id='2'>
0441
0442
0443 <beginfold id='1'>/*</beginfold id='1'> With unnecessary breaklines and spaces <endfold id='1'>*/</endfold id='1'>
0444
0445 blockquote .ref
0446 <beginfold id='2'>{</beginfold id='2'>
0447 flex : 0 1 30%;
0448 flex-wrap : wrap;
0449 <endfold id='2'>}</endfold id='2'>
0450
0451 @media screen and (orientation: landscape) <beginfold id='2'>{</beginfold id='2'>
0452 .sidebar <beginfold id='2'>{</beginfold id='2'>
0453 width: 500px; <endfold id='2'>}</endfold id='2'> <endfold id='2'>}</endfold id='2'>
0454
0455
0456 <beginfold id='1'>/*</beginfold id='1'> Special selectors: HTML5 allows user defined tags <endfold id='1'>*/</endfold id='1'>
0457
0458 header <beginfold id='2'>{</beginfold id='2'>
0459 flex <beginfold id='2'>{</beginfold id='2'>
0460 width: 300px;
0461 <endfold id='2'>}</endfold id='2'>
0462 <endfold id='2'>}</endfold id='2'>