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